JSFiddle - React, Tailwind, and code Playground

by chrisjg

HTML

<body> 
    Normal - this has extra height not specified in code
    <div class="logo-normal">
        <a href="#">
            <img src="https://dl.dropboxusercontent.com/u/26735641/logo.png" />
        </a>
    </div>
    <p>
        &nbsp; <!-- This is a spacer -->
    </p>
    Weird - This has no extra height, due to the "vertical-align: middle;" in the CSS
    <div class="logo-weird">
        <a href="#">
            <img src="https://dl.dropboxusercontent.com/u/26735641/logo.png" />
        </a>
    </div>
    <p>
        &nbsp; <!-- This is a spacer -->
    </p>
    Normal Fixed - This no longer has extra height
    <div class="logo-normal-fixed">
        <a href="#">
            <img src="https://dl.dropboxusercontent.com/u/26735641/logo.png" />
        </a>
    </div>
    <p>
        <p>
            &nbsp; <!-- This is a spacer -->
        </p>
        By adding "line-height: 0;" to the CSS for the &lt;div&gt; element, the extra height is eliminated.
    </p>
    <p>
        Unless otherwise specified, all block elements inherit "line-height". by setting it to 0 we eliminate this inheritance.
    </p>
    <p>
        Specifying "vertical-align: middle;" in the CSS removes the line-height inheritance because line height is no longer relevent when performing this alignment.
    </p>
    <p>
        You can test this by adding "line-height: inherit;" to the CSS for the "logo-normal" &lt;div&gt; element. This will have no effect on how it looks, proving that the line-height is, by default, inherited.
    </p>
    <p>
        Inspect using your favourite tool and you can see what value has been inherited.
    </p>
</body>

CSS

body {
    width: 230px;
}
.logo-normal {
width: 220px;
margin-left: 20px;
display: block;
float: left;
    border: 1px solid black;
}
.logo-normal img {
max-width: 100%;
min-width: auto\9;
border: 0;
-ms-interpolation-mode: bicubic;
}
 
.logo-weird {
width: 220px;
margin-left: 20px;
display: block;
float: left;
border: 1px solid black;
}
.logo-weird img {
max-width: 100%;
min-width: auto\9;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
.logo-normal-fixed {
width: 220px;
margin-left: 20px;
display: block;
float: left;
    border: 1px solid black;
    line-height: 0;
}
.logo-normal-fixed img {
max-width: 100%;
min-width: auto\9;
border: 0;
-ms-interpolation-mode: bicubic;
}