Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Margin-bottom on label isn't applying

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #145419
    Founts
    Participant

    In my current Pen, http://codepen.io/Founts/pen/HmtGA, I’m having some trouble with the Label tag above the Select element in that it’s not applying CSS for the margin. Chrome sees the margin code but it’s not rendering. When I apply Display: Block (converting it from Display: Inline), the margin code is rendered correctly. Any help is appreciated.

    #145422
    Senff
    Participant

    I don’t see a label above the select element. I see one NEXT to it though (“Select a Choice”) but there is no margin for it defined?

    #145426
    Martin Duran
    Participant

    Founts, If I’m correct the problem is after the breakpoint? I see you have a class on that problematic label. I applied that following styles on it’s class under @media(max-width:600px) and it fixed the spacing issue:

    form label.desc { display:table; clear:both; }

    Note: place that bit of code within @media(max-width:600px)

    #145441
    Founts
    Participant

    Senff: I left out the part where I needed to explain that the label moves to the top below the 600px breakpoint (media query).

    Martin: You were correct about the breakpoint. Changing the display to Table, like you mention, or Block, as I mentioned, resolves this quirk which is good. But I’m wondering why this is actually happening. Curious why you suggest display: table as well.

    #145444
    Martin Duran
    Participant

    When margin or padding isn’t rendering, it’s usually because floats need to be cleared. display:table; clear: both; will clear those floats. Oftentimes it’s the reverse, if you add a float to an element, the padding or margin will suddenly appear. display:table;clear:both; will fix the issue regardless.

    #145445
    Martin Duran
    Participant

    I just reexamined your code, and, in this case, if you float the label before the select menu left after the @media (max-width:600px) breakpoint, the margin appears. So, pick your choose.

    Here is an article on clearing floats and why it is necessary: https://css-tricks.com/the-how-and-why-of-clearing-floats/

    Somewhere in your html, a float needed to be cleared.

    ALSO, labels are not block level elements, so they don’t use margin the same way block level elements do. That’s why, when you gave your label display:block; It acted appropriately. Now that I think of it, that’s probably the issue, not the floats. But it’s good to know about clearing floats. Hope this helped.

    You’ll have to forgive me. When this type of error occurs, I assume it’s because floats haven’t been cleared.

    #145504
    Founts
    Participant

    Martin, thanks for the tips. Much appreciated!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.