Margin-bottom on label isn't applying

[Founts]

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.

[Senff]

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?

[Martin Duran]

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)

[Founts]

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.

[Martin Duran]

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.

[Martin Duran]

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.

[Founts]

Martin, thanks for the tips. Much appreciated!

[Author]

Posts