Margin-bottom wont work, need to create spacing between words/footer links

HTML & CSS
1

fitem margin bottom: whatever value i put it will not work I simply want to space them out vertically a bit. words are too close.
my codepen:https://codepen.io/lilliongoddess/pen/ExgKGmX

trying to copy https://www.nrdc.org/ footer.

2

Did you mean you wanted a bottom margin on the list elements in the footer?

i.e.

ul.list li{margin-bottom:.7rem}

I’m sure you must mean something else as that is too obvious and I think I have misunderstood :slight_smile:

3

Which words? The menu (list) items or the copyright notice?

Sometimes when vertical margins can’t be made to work, it is because of collapsing.

Also, run “Analyze HTML” on it, there are errors which won’t help your cause.

1 Like
4

no that was it. why tf wouldnt it work how i normally do it. .fitem or even margin bottom 3px, 5px whatever. why? or even ul.li…css just be making shit up. i’ve never really used ul or li so i wonder if theres something with that??

5

The problem is that .fitem is the class on your anchors. Anchors are inline elements by default. Inline elements (other than inline-block) are not capable of taking vertical margins.

Simply apply your margins to the li as Paul has shown or change your anchor to a block.


.fitem {
  display:block;
  margin:10px 0;
}

You just need to apply yourself to a little bit more learning about CSS and how it works.

One more thing, remove the float from .footer-inner , there is no need to float it when flexbox gives you plenty of layout methods


.footer-inner {
  display: flex;
  padding-top: 3rem;
  min-height: 160px;
  width: 49.15254%;
  /*float: left; remove this */
}
3 Likes
6

Thank you!! What about why ul.li didn’t work? shrugs. I’m definitely looking into frameworks. Lol. I didn’t notice that float, thank you again.

7

Looks like a typo as ul.li would refer to a ul with a class of li.

<ul class="li">

Perhaps you meant ul li ? The space is a descendant selector.

ul li{margin-bottom:.7rem}

That would work but of course would be applied globally to all list elements which is not a good approach.

I should concentrate on the basics of css and html first as frameworks are even more complicated and have their own set of extra rules to learn also. You still need a good knowledge of html and css to use them properly.

3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.