CSS - inline, inline-block, block

이지은·2021년 1월 14일
0

display는 레이아웃을 제어하는 중요한 property이다.
대부분 엘리먼트의 기본값은 block나 inline이다.

block

<div>This sentence is a <p class="block">block-level element.</p></div>

--> This sentence is a
block-level element (새 줄에서 시작)

div는 표준 블록 엘리먼트이다. p, form, header, fotter, section 등도 블록 레벨 엘리먼트이다. 블록 엘리먼트는 새 줄에서 시작한다.

inline

<div> Span is an <span class="inline">inline element.</span> </div>

--> Span is an inline element.

An inline element does not start on a new line and only takes up as much width as necessary.

span은 표준 인라인 엘리먼트이다. 인라인 엘리먼트는 새로운 줄에서 시작하지 않고 단락안에서 텍스트를 감싸는 역할을 한다. a 엘리먼트도 인라인 엘리먼트이다.

*모든 엘리먼트들은 기본 표시 타입이 지정되어 있지만 재정의가 가능하다.

inline-block

inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있다.

이렇게 inline-block를 사용하면 float와 같은 효과를 낼 수 있고 clear을 쓰지 않아 보다 편리하다. 하지만 IE6와 IE7에서 inline-block를 지원하려면 별도의 작업이 필요하다.

<링크텍스트 참고>

레이아웃을 잡기 위해 inline-block을 사용할 수도 있는데 이때 inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받는다. 이때 프로퍼티를 top으로 설정하는게 좋고 각 컬럼의 너비도 설정할 필요가 있다.

profile
Front-end 🐕🦶

0개의 댓글