A Pen by Andrew Kirchmyer.

difference-between-html-display-types.markdown

difference between html display types

A Pen by Andrew Kirchmyer on CodePen.

License.

index.html

<h2>inline: a-tags are inline by default. You cannot set a height or a width.</h2>
<p>
<a class="inline">Inline</a>
<a class="inline">Inline</a>
<p>
  <h2>Inline-block: Same line, can set height and width.</h2>
<p>
<a class="inline-block"></a>
<a class="inline-block"></a>
<p>
  <h2>
    Block: Different lines, can set height and width.</h2>
<a class="block"></a>
<a class="block"></a>      

style.css

a {
    height: 100px;
    width: 100px;
    margin: 5px;
    background-color: LightSeaGreen;
}
.inline {
    height: 100px;
    width: 100px;
}
.inline-block {
    display: inline-block;
}
.block {
    display: block;
}