[HTML/CSS] Block Elements와 Inline Elements 이해

모든 HTML element는 종류에 따라 block 또는 inline과 같은 display 값을 갖는다.

1. Block-level Elements

• 항상 새로운 line에서 시작한다.
• 브라우저가 자동적으로 element의 앞 뒤에 space를 추가한다. 
• 가로 전체를 차지한다.
• 해당 태그 : <p>, <div>

2. Inline Elements

• 새로운 line에서 시작하지 않는다.
• 필요한 가로 길이만 차지한다.
• 해당 태그 : <span>

 

img 태그는 Inline-level Elements이다.

    <header>
      <div class="inner">
        <img src="images/busan.jpg" alt="부산" />
      </div>
    </header>

아래 사진 처럼 하단에 공백이 생기는 것을 볼 수 있다.

Inline-level Elements이기 때문이다.

CSS 속성에서 display: block으로 설정하면,

Block-level Elements로 취급하게 된다.

img {
  display: block;
}

header {
  background-color: royalblue;
}

header .inner {
  margin: 0 auto;
  background-color: orange;
}

하단 공백이 사라지게 된다.

CSS에서 'display' property는 element를 block 또는 inline 중 어떻게 취급할 것인지를 정의한다.

 

참고자료

1. HTML Block and Inline Elements

https://www.w3schools.com/html/html_blocks.asp

HTML Block and Inline Elements

2. display - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/display

display - CSS: Cascading Style Sheets | MDN