TIL - 06. inline, inline-block, block 에 대해서

박태환·2021년 7월 6일
0

Today I Learned

목록 보기
6/15
post-thumbnail

display 속성의 대표적인 것들을 정리하고 넘어간다.

1. inline
말 그대로 한 줄 안에 여러 요소들이 나란히 배치된다.
inline으로 지정되면 태그에 담긴 컨텐트의 크기에 따라 공간이 차지된다.
따라서 width나 height를 지정할 수 없다.
padding이나 margin값도 좌우만 가능하다.
대표적으로 span, a 태그 등이 있다.

2. block
한 줄 전체를 차지한다.
block으로 지정되면 width나 height로 컨텐트의 크기를 조절할 수 있고 padding이나 margin도 위, 아래, 좌, 우 모두 조정 가능하다.
대표적으로 div, p, h1 태그 등이 있다.

3. inline-block
inline 요소들처럼 한 줄 안에 나란히 배치되지만 block 요소들처럼 width나 height, padding과 margin의 상하까지 조절이 가능하다는 이점이 있다.
대표적으로 button, select 태그 등이 있다.

기본적으로 가지고 있는 속성값은 display 속성으로 자유롭게 변경이 가능하고 용도에 맞게 쓸 수 있도록 많이 보고 연습해야겠다.

profile
mekemeke

0개의 댓글