/* Block: takes full width, stacks vertically */
div, p, h1-h6, section, article, header, footer {
  display: block;
}

.block {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  /* Takes full available width */
  /* Stacks vertically with other elements */
}

/* Inline: flows with text, ignores width/height */
span, a, strong, em {
  display: inline;
}

.inline {
  display: inline;
  width: auto;      /* width ignored */
  height: auto;     /* height ignored */
  margin: 10px 0;   /* vertical margin ignored */
  padding: 5px 10px; /* works but weird */
  /* Flows horizontally with text */
}

/* Inline-block: flows inline but respects sizing */
.inline-block {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  /* Flows horizontally like inline */
  /* But respects width, height, margin like block */
}

/* Common use: buttons, inputs */
button {
  display: inline-block;
  padding: 10px 20px;
  width: auto;
}