Display:Inline with Margin, Padding, Width, Height

display:inline with margin, padding, width, height

Please see "Inline formatting contexts" at the CSS spec for the full explanation.

Basically margin, padding and border can be set on inline-level elements, but they may not behave as you expect. The behavior will probably be OK if there's only one line, but other lines in the same flow will likely exhibit behavior different from your expectations (i.e. padding will not be respected). In addition, your inline box can be broken if it contains breakable elements and reaches the margin of the containing element; in that case, at the point of break, margins and padding will not be respected as well.

Found a nice example of that with lists: http://www.maxdesign.com.au/articles/inline/

display: inline-block extra margin

The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1; on the surrounding container.

Padding not working in CSS even with display inline-block

There is no such thing as padding auto.

Because of that, the entire padding line is invalid and is not being utilized.

You can also see this when you inspect an element. You'll notice it's crossed out with a warning sign next to it:

CSS Padding(?) on inline block top messing up my div content

You just need to remove the margin from the content header. You can target a specific margin using the top,left, right or bottom. In this case you need to target the margin-top of the h2 tag.

.content {
    text-align:center;
    border-radius:5px;
    background-color:darkblue;
    margin-top:0; /*This is the added property*/
}

Is this what you're looking for? https://codepen.io/anon/pen/ZOwEGE

Also it's a good idea to use the web inspector (F12) in the browser to find out whats affecting your elements.

Add margin top or padding top to a series of display inline div tags

Margin, among many other CSS properties, doesn't work on objects with display: inline.

Use inline-block instead, or display: block together with float: left.

---

Related Topics