[css] display 속성의 inline, block, inline-block

 

 

 

 

 

▶ inline 요소

• ex) span
• 영역의 크기가 내부 콘텐츠 크기로 정해진다.
• margin, padding의 좌/우 여백은 지정할 수 있지만 위/아래의 여백을 지정할 수 없다.
• 여러 요소가 가로 배치가 된다.

 

 

▶ block 요소

• ex) div
• 영역의 크기를 width, height로 지정할 수 있다.
• width를 지정하지 않으면 가로 전체를 차지한다.
• 여러 요소가 세로 배치가 된다.

 

 

▶ inline-block 요소

• ex) input
• 영역의 크기를 width, height로 지정할 수 있다.
• 여러 요소가 가로 배치가 된다.