Controlling Element Display

The display property specifies how an element is displayed.

Every HTML element has a default display value depending on what type of element it is.

/* Block - Takes full width */
div {
  display: block;
}

/* Inline - Takes only necessary width */
span {
  display: inline;
}

/* Inline-block - Inline but can have width/height */
.button {
  display: inline-block;
  padding: 10px 20px;
}

/* None - Hides element */
.hidden {
  display: none;
}

/* Flex - Flexible layout */
.container {
  display: flex;
}

• block - Takes full width, starts on new line
• inline - Takes only needed width, no line break
• inline-block - Inline but accepts width/height
• none - Hides element completely
• flex - Flexible box layout
• grid - Grid layout

<div class="block">Block Element</div>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<div class="inline-block">Inline-Block 1</div>
<div class="inline-block">Inline-Block 2</div>