How to remove margin between inline-block element and its container?

Question

I have the following code:

.header {
  background-color: red;
}

.content {
  background-color: blue;
}

em {   
  display: inline-block;
  background-color: yellow;
}
img {
  display: block;
}

     <div class="header">
        <em>
          <img src="https://placehold.co/60x60"/>
        </em>
      </div>
    
      <div class="Content">
        Some content
      </div>

How the remove the space under the image?

By default, `inline-block` aligns to the baseline of any text that might appear next to it. Either remove `inline-block` from the `em`, or add `vertical-align: bottom` to it. — ralph.m, Jun 07 '23 at 22:12
`` Contexts in which this element can be used: Where phrasing content (TEXT) is expected. https://www.w3.org/TR/2011/WD-html5-author-20110809/content-models.html#phrasing-content — Ronnie Royston, Jun 07 '23 at 22:24

score 0 · Answer 1 · answered Jun 07 '23 at 22:13

inline elements and as such also inline-block are placed on the baseline. Below is an inline descender space for letters like j, y, g, q, p.

You can simply use vertical-align to place the element at the bottom instead of the baseline

.header {
  background-color: red;
}

.content {
  background-color: blue;
}

em {   
  display: inline-block;
  background-color: yellow;
  vertical-align: bottom;
}
img {
  display: block;
}

<div class="header">
        <em>
          <img src="https://placehold.co/60x60"/>
        </em>
      </div>
    
      <div class="Content">
        Some content
      </div>

How to remove margin between inline-block element and its container?

1 Answers1