[CSS] block, inline, inline-block 정리

1. block 

 

block 요소의 특징은

 

• 항상 새로운 라인에서 시작한다.(마치 위에서부터 블럭을 쌓듯이)
• 넓이의 디폴트값이 항상 최대값이다. 넓이를 따로 설정하지 않으면 옆으로 끝까지 늘어난다.
• inline 요소를 포함할 수 있다. 
• margin, padding, width, height 등 속성을 적용할 수 있다. 

 

block 요소들로는

div, h1~h6, p, ol, ul, li, form, hr, table 이 있다. 

 

 

 

 

2. inline 

 

inline 요소의 특징은 

 

• 새로운 라인에서 시작하지 않는다. 다른 요소와 함께 한 줄에 위치한다. 
• content 의 크기만큼 너비를 차지한다. 
• block 요소를 포함할 수 없다. 보통 block 안에 inline 을 담아서 사용한다. 
• width, height, margin-top, margin-bottom 속성을 적용할 수 없다. 상하 여백은 line-height 로 적용함.

 

inline 요소들로는 

span, a, strong, img, br, input, select, textarea, button 이 있다.

 

 

 

 

3. inline-block

 

inline-block 은 inline과 block 의 특징을 모두 갖는다. 한 줄에 위치할 수 있으며 width, height, margin 속성들을 모두 적용할 수 있다.