CSS - Display basic behavior

by Rodwyn Moreno

HTML

<p>
  <strong>Block-level</strong> elements are rendered as a block and hence take up all the available horizontal space. You can set margin-top and margin-bottom and two block-level elements will render in two different lines.
</p>

<div id="my-block">
  display: block;
</div>

<p>
  <strong>Inline elements</strong> on the other hand only take up the space they require to fit their content in. Hence two inline-elements will fit into the same line.
</p>
<p>
  They also use the box-model but <code>margin-top</code> and <code>margin-bottom</code>  have no effect on the element. <code>padding-top</code>  and <code>padding-bottom</code>  also have a different effect. They don't push the adjacent content away but they will do so with the element border.
</p>
<p>
  Additionally, setting a <code>width</code>  or <code>height</code>  on an inline element also has no effect. The width and height is auto to take as much space as required by the content.
</p>

<div class="container">
  <div class="inline_item">A</div>
  <div class="inline_item">B</div>
  <div class="inline_item">C</div>
</div>

<p>
  If you want to do so or need both block-level and inline behavior, you can set <code>display: inline-block</code>  to merge behaviors.
</p>

<div class="container">
  <div class="inline_block_item">A</div>
  <div class="inline_block_item">B</div>
  <div class="inline_block_item">C</div>
</div>

CSS

* {
  font-family: sans-serif;
}

#my-block {
  border: #1200ff solid thin;
  display: block;
  margin-bottom: 16px;
}

.container {
  border: #21ff00 solid thin;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.inline_item {
  background-color: #ee00ff;
  display: inline;
  margin: 4px;
  padding: 4px;
}

.inline_item:nth-child(1) {
  background-color: #fc0033;
  height: 50px;
  width: 100px;
}

.inline_block_item {
  display: inline-block;
  background-color: #cc00ff;
  margin: 4px;
  padding: 4px;
}