CSS display Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  background: #f7f9fc;
  color: #111827;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.examples {
  display: grid;
  gap: 12px;
}

.box {
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e6e9ef;
}

.block {
  display: block;
}

.inline {
  display: inline;
  background: #eef2ff;
  margin-left: 8px;
}

.inline-block {
  display: inline-block;
  width: 180px;
  vertical-align: middle;
}

.flex-container {
  display: flex;
  gap: 10px;
}

.flex-item {
  flex: 1 1 0;
  padding: 12px;
  background: #fff7ed;
  border: 1px solid #fde3c5;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  padding: 12px;
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  text-align: center;
}

.none {
  display: none;
}</style></head><body><div class='wrapper'>
  <h2>CSS display examples</h2>
  <div class='examples'>
    <div class='box block'>Block element (div)  -  display: block</div>
    <span class='box inline'>Inline element (span)  -  display: inline</span>
    <div class='box inline-block'>Inline-block element  -  display: inline-block</div>
    <div class='flex-container'>
      <div class='flex-item'>Flex 1</div>
      <div class='flex-item'>Flex 2</div>
      <div class='flex-item'>Flex 3</div>
    </div>
    <div class='grid-container'>
      <div class='grid-item'>1</div>
      <div class='grid-item'>2</div>
      <div class='grid-item'>3</div>
      <div class='grid-item'>4</div>
    </div>
    <div class='box none'>Hidden element  -  display: none</div>
  </div>
</div></body></html>