Display:Block Inside Display:Inline

.button-wrapper,.wings {  display: inline-block;}.buttons {  display: block;  margin: 0.4em auto;}

<img src="//placehold.it/200" class="wings" id="leftWing" /><div class="button-wrapper">  <button class="buttons">Login</button>  <button class="buttons">Register</button></div><img src="//placehold.it/200" class="wings" id="rightWing" />

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

Put display:inline element inside nested display:block element doesn't work?

Your markup is invalid. You are not supposed to nest a p element inside p element and hence the issue.

From W3C :

The P element represents a paragraph. It cannot contain block-level
elements (including P itself).

Check the source and you will get it why it behaves differently than what you expect it to be

Your browser will actually separate all the tags out and close the p elements for you.

So how we fix it? Use the <span> element instead of <p>

Demo

CSS: displaying display:block elements inside display:inline elements

write this in your css:

div {
  display: inline-block;
  *display:inline;/*for IE7*/
  *zoom:1;/*for IE7*/
}

Inline element inside inline-block div

The default vertical-align value is baseline, it can be the bottom line of the text or the bottom line of an image (img element is a replaced element, inline* level), which causes the offset in the first row of your demo.

In order to fix it, you can set vertical-align to top, or like you said set img to display: block also works.

Div height and position with inner div display inline-block

The .inner div is set to display: inline-block. That activates the vertical-align property, which applies only to inline-level and table cell elements.

The default value for vertical-align is baseline. So that's what you're seeing – the inner div aligns to the baseline of the content.

To fix the problem, add this to your code:

.inner {
    vertical-align: top;
}

Why Empty Display Inline Block Element Create Height But Display Inline and Display Block not?

To understand this you need to know the difference between a BFC (block formatting context) and IFC (inline formating context.

When having only block elements inside your container this one will create a BFC:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In this case, only the height and margin of the block element inside are considered to calculate the height of your container and you only have one empty element so the height is 0.

When having an inline-block/inline elements you will trigger the creation of an IFC and the story is different:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The height of a line box is determined by the rules given in the section on line height calculations.

As you discovered, we will be dealing with line boxes and line-height will be considered here to define the height of each line box (in your case you have only one)

Now, the difference between the inline and inline-block is about white space. In the case of inline element you will end having an empty container because all the white space will collapse. More details here: https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#white-space-prop.

If you change the white space algorithm (and you add a space) you will get the same height as with the inline-block element.

.container {
  background-color: red;
  margin:5px;
  white-space:pre;
}

<div class="container"><div style="display: inline-block;"></div></div>

<div class="container"><div style="display: inline;"> </div></div>

<div class="whole">
  <span id="main">
      <p></p>
  </span>
  <span id="second-main">
      <p></p>
  </span>
  <span id="third-main">
      <p></p>
  </span>
  <span id="fourth-main">
      <p></p>
  </span>
  <span id="fifth-main">
      <p></p>
  </span>
</div>

body {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  overflow: scroll;
}

.whole {
  width: 100%;
  height: 400px;
  -ms-display: flexbox;
  display: flex;
  margin: 0px 0px 0px 240px;
}

.whole > span {
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}

#main { 
  background-color: #212121;
}

#second-main { 
  background-color: #424242;
}

#third-main { 
  background-color: #616161;
}

#fourth-main { 
  background-color: #757575;
}