Inline vs inline-block

readme.markdown

Inline vs inline-block

A Pen by Dmitriy on CodePen.

License.

index.html

<p>
  I am a paragraph and this is a <span>span</span> inside that paragraph. A span
  is an inline element and so does not respect width and height.
</p>

style.css

body {
  font-family: sans-serif;
}
p {
  border: 2px solid rebeccapurple;
  width: 200px;
}
span {
  /*   inlne-block consider height, width, vertical padding and margin */
  /*   display: inline-block; */
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 150px;
  background-color: lightblue;
  border: 2px solid blue;
}