본문으로 건너뛰기

Display

Display

The CSS display property determines how an element is displayed on a web page.

The display property can take various values, each defining the box type and layout of an HTML element differently:

  • block: The element occupies the full width (100%) of the screen, and each element starts on a new line.

  • inline: The element occupies only as much width as its content and can start or end in the middle of a line.

  • none: The element is not displayed on the screen.

  • inline-block: Combines the characteristics of inline and block. It occupies only as much width as its content but can be styled like a block.


  1. display: block;

Block-level elements have a line break before and after them. This means they occupy the entire horizontal space of their width, and other elements can only be placed above or below them. By default, the width of a block-level element takes up the full width of its parent element, excluding margin, padding, and border.

  • Examples include: <div>, <p>, <h1>~<h6>, etc.
CSS
div {
display: block;
}

  1. display: inline;

Inline elements are placed between text or other inline elements without line breaks. An inline element occupies only the space bounded by its content, and you cannot directly set its width or height. Top and bottom margins or padding do not apply.

  • Examples include: <span>, <a>, <strong>, etc.
CSS
span {
display: inline;
}

  1. display: inline-block;

inline-block combines the characteristics of both inline and block. This means the element is placed inline without line breaks like inline elements, but you can set its width and height like block elements.

  • Examples: Useful for elements like custom buttons or icons.
CSS
.icon {
display: inline-block;
}

  1. display: none;

An element set with display: none becomes completely invisible on the web page. Moreover, it does not affect the layout of the document, as if the element has been removed from the HTML source code. Unlike visibility: hidden;, display: none also removes the space allocated for the element.

  • Examples: It is commonly used to show or hide an element under specific conditions using scripts.
CSS
.hidden {
display: none;
}

Example

Below is an example using the display property.

<div>Block Element</div>
<span>Inline Element</span>
<span class="hidden">This will not be displayed</span>
<button>Inline-Block Button</button>
CSS
div {
display: block;
background-color: lightblue;
}

span {
display: inline;
background-color: lightyellow;
}

.hidden {
display: none;
}

button {
display: inline-block;
background-color: lightgreen;
}

The div element occupies the full width of the screen as a block element with a lightblue background.

The span element starts in the middle of the line as an inline element with a lightyellow background, and the span element with the .hidden class is not displayed on the screen.

The button element starts in the middle of the line as an inline-block element with a lightgreen background, having its own height and width.


Follow the asterisk-highlighted part of the code to try inputting it.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!