CSS - Inline, block, Inline-block

GyungHo Go·2020년 4월 20일
0
post-thumbnail

모든 HTML element들은 기본적으로 display 속성값을 갖고있다. display 속성값은 웹페이지 상에서 엘리먼트들과의 관계에서 어떻게 보여지고, 어떻게 상호작용하는지 나타낸다.
display 속성값에는 세 가지가 있다.
1. inline
2. block
3. inline-block

Inline

display 속성이 inline으로 지정된 element는 앞뒤 줄바꿈 없이 한 줄에 다른 element들과 나란히 배치된다. inline은 주로 텍스트를 입력할때 사용된다. 높이는 폰트 크기만큼 잡힌다. (하지만 line-height로 설정이 가능함)
대표적인 inline element들은
태그 등이 있다.

inline 특징
1. width, height를 지정할 수 없다.
2. padding, margin은 좌우 간격만 반영이 되고, 상하 간격은 반영되지 않는다.

block

block은 한 영역을 차지 하는 박스형태을 가지는 성질이다. 그렇기 때문에 기본적으로 block은 width값이 100%가 된다. 다른 element들을 다른 줄로 밀어내고 혼자 그 줄을 차지하는 것이다. 대표적인 block element들은 태그 등이 있다.
block element의 특징은 width, height, padding, margin값을 지정할 수 있다.

inline-block

inline-block 속성은 앞에서 말한 inline과 block의 특징을 모두 가지고 있다.
1. 줄마꿈이 이루어 지지 않는다.
2. block처럼 width, height값을 지정 할 수있다.
3. width, height값을 지정하지 않으면 inline과 같이 컨텐츠 만큼 영역이 잡힌다.

대표적인 inline-block element들은
등이 있다.

profile
기록하는 습관

0개의 댓글