JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<p>div { padding: 5px;}</p>
<div class="example1">
  <img src="http://cs633316.vk.me/v633316904/6a6e/U7joCzv13OM.jpg" alt="hello kitty">
</div>
<p>You can see: padding-bottom is more then 5px.</p>
<p>&nbsp;</p><p>&nbsp;</p>
<div class="example1">
  <img src="http://cs633316.vk.me/v633316904/6a6e/U7joCzv13OM.jpg" alt="hello kitty">
  &nbsp;<span>Abg</span>&nbsp;
</div>
<p>You can see: under "Abg" padding-bottom is 5px.</p>
<p>The image is placed on the base-line of font (white dashed line on the next figure).</p>
<div class="example1 baseline">
  <img src="http://cs633316.vk.me/v633316904/6a6e/U7joCzv13OM.jpg" alt="hello kitty">
  &nbsp;<span>Abg</span>&nbsp;  
</div>
<p>&nbsp;</p><p>&nbsp;</p>
<p>div img { display: block;}</p>
<div class="example1 imgblock">
  <img src="http://cs633316.vk.me/v633316904/6a6e/U7joCzv13OM.jpg" alt="hello kitty">
</div>
<p>Good result!</p>
<p>&nbsp;</p>
<p>div img { vertical-align: bottom;}</p>
<div class="example1 baseline good">
  <img src="http://cs633316.vk.me/v633316904/6a6e/U7joCzv13OM.jpg" alt="hello kitty">
  &nbsp;<span>Abg</span>&nbsp;  
</div>
<p>&nbsp;</p>

CSS

.example1 {
  position: relative;
  display: inline-block;
  padding: 5px;
  background: skyblue;
  font-size: 32px;
  line-height: 1.2em;
}

.example1 span {
  background: steelblue;
}

.example1.baseline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 0;
  border-top: 1px dashed white;
}

.example1.imgblock img {
  display: block;
}
.example1.good img {
  vertical-align: bottom;
}