/* Block elements */
div, p, h1-h6, section, article, header, footer, main, nav {
  /* Default display: block */
}

.block {
  display: block;
  /* Takes full available width */
  /* Stacks vertically with other elements */
  /* Respects all margin, padding, border */
  /* Width and height are respected */
}

/* Block element flow */
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>

<!-- Renders vertically stacked -->

/* Inline elements */
span, a, strong, em, button, img {
  /* Default display: inline */
}

.inline {
  display: inline;
  /* Flows with text horizontally */
  /* Width and height are ignored */
  /* Only horizontal margin/padding work */
  /* Vertical margins are ignored */
}

/* Inline element flow */
<span>Inline 1</span>
<span>Inline 2</span>
<span>Inline 3</span>

<!-- Renders horizontally: [Inline 1][Inline 2][Inline 3] -->

/* Inline-block hybrid behavior */
.inline-block {
  display: inline-block;
  /* Flows inline with text */
  /* But respects width and height */
  /* All margins and padding work */
}

/* Real-world inline-block elements */
button, input, img {
  /* Default display: inline-block */
}

/* Making elements inline-block */
.button {
  display: inline-block;
  padding: 10px 20px;
  background: blue;
  color: white;
  margin: 10px;
  /* Flows horizontally, respects sizing */
}

/* Menu items as inline-block */
nav li {
  display: inline-block;
  margin: 0 15px;
}

/* Buttons in a row */
button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
}

/* Image gallery with inline-block */
.gallery-item {
  display: inline-block;
  width: 200px;
  margin: 10px;
  vertical-align: top;
}

/* Center inline-block element */
.center-container {
  text-align: center;
}

.centered-block {
  display: inline-block;
  /* Centered by parent text-align */
}