Menu
I have an element with display: inline-block, but it doesn't seem to accept margin-top. Is this because the element is still treated as an inline element?
If yes, does anyone have a workaround?
EDIT #1:
My CSS is quite simple:
.label { background: #ffffff; display: inline-block; margin-top: -2px; padding: 7px 7px 5px; } I ended up wrapping the content in another div and giving that a margin-top. But that causes a lot of extra markup and makes my code less clear.
EDIT #2:
margin-top & margin-bottom on inline-block elements only seems to work with positive values.
647
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
The <p class="b"> element has a top and bottom margin of 20px. This means that the vertical margin between <p class="a"> and <p class="b"> should be 50px (30px + 20px).
you can also try replacing the negative margin with
.label{ position:relative; top:-2px; } in addition to the rest of your .label style
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
