Inline-Block Without Margins

Inline-Block inside Inline-block Invisible Margin

Each inline or inline-block element on its own line (like your :after) element, will behave like a line of text, and is therefore subject to the line-height, vertical alignment and baseline of whatever font and font-size you've set on the parent (24px).

While it requires an extra element, your initial example solution of wrapping the text in its own element, applying a 0 font-size to parent, and applying the 24px font-size only to the text element (and therefore to that first line only), is the best solution if you don't want to resort to hacks such as negative margins or negative line-heights.

This is a summary of typographic CSS properties as they would apply to inline or inline-block elements: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

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.

How to put divs in a row with display: inline-block, without a margin?

It is because of the new line between the elements. You could comment it like I did, or make those elements inline with each other

.div {  position: relative;  display: inline-block;  background: black;  width: 100px;  height: 100px;  margin: 0 !important;}

<div class="div"></div><!----><div class="div"></div><!----><div class="div"></div>

Strange margin on `display:inline-block`-elements

Write font-size:0;. Like this:

#container{
    width:300px;
    border:1px solid black;
    font-size:0;
}

Check this http://jsfiddle.net/y7L7q/1/

OR

Write your mark like this:

<div id="container">
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

Check this http://jsfiddle.net/y7L7q/2/

Display inline-block generates a margin-bottom that i can't remove

The space you are seeing is the space given to the descender height of letters like a lowercase y or g when an element's display value is set to inline-block;. You are essentially treating an element like it is text when you set it to display: inline-block;.

To fix, remove display: inline-block; from your .posts DIV. It doesn't need it for the layout you have.

---

Related Topics