CSS display: inline-block does not accept margin-top?

css position label margin
Gregory Bolkenstijn picture Gregory Bolkenstijn · Sep 30, 2011 · Viewed 62.3k times · Source

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.

Answer

Einacio picture Einacio · Sep 30, 2011

you can also try replacing the negative margin with

.label{
    position:relative;
    top:-2px;
}

in addition to the rest of your .label style

Related questions

How to overlay one div over another div

I need assistance with overlaying one individual div over another individual div. My code looks like this: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More