CSS) Display : block, inline, inline-block

G_New·2025년 2월 22일

CSS

목록 보기

4/7

CSS에서 display 속성은 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 상호 배치되는지를 결정한다.
display 속성값으로는 대표적으로 block, inline, inline-block이 있다.

대부분의 HTML element는 block 이다.

💡 block 속성은 inline과는 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지한다.

💡 block 속성을 가지고 있는 태그는 기본적으로 너비 100% (width:100%) 속성을 가지고 있다.

💡 화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스레 줄 넘김이 된다.

💡 inline속성과 달리 크기를 지정할 수 있어서, margin, width, height 속성을 정의하면 모두 적용이 된다.

줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향이다.

❗ 위 아래 margin을 적용할 수 없다. 즉, margin-top,margin-bottom 속성을 정의해도 적용되지 않는다.

💡 인라인 요소의 상,하 여백은 margin이 아닌 line-height 속성에 의해 발생한다.

❗ 너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.

❗ 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 margin이 자동으로 발생한다.

😲 인라인과 블럭이 합체했다!!

💡 display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 한 줄에 다른 엘리먼트들과 배치된다.

💡 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.

💡 즉, inline의 성질을 가지면서 동시에 사용자가 원하는 대로 모형을 꾸밀 수 있다.

block , inline , inline-block 이렇게 세 가지 display의 특징들을 잘 유념해서 활용해보자!😃

기록하는 습관 만들기💫