[html/css] css display 속성

 

종류	inline-block / inline	block	none
너비	최소한으로 줄어든다	최대한으로 넓어진다	없어짐
본질	글자화	블록화	-
line 사용	한 줄에 최대한 여러개나옴	한줄을 무조건 혼자씀	-
정렬	부모의 text-align에 정렬	스스로 margin-lief,margin-right를 사용해서 정렬	-

예외

• a,img,span 엘리먼트는 기본적으로 display:inline 이다.
• inline 요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

 

 

 

 

display: none

 보이지 않음 -박스가 생성되지 않음

 

display:block 

블록 박스 - 요소 앞 뒤로 줄바꿈

 

display:inline

인라인 박스(기본값) 앞뒤 줄바꿈이 되지 않는다. 

가로/높이 값을 주어도 인식되지 않는다. 

글자가 써진 그대로만 나타난다. 

 

display:inline-block 

block과 inline의 중간 형태 -박스모양이 inline처럼 옆으로 늘어섬