display

'화면에 어떻게 표현되는가', '어떻게 위치하는가'를 지정하는 속성

display 속성이 가질 수 있는 값
none
block
inline
inline-block

block

자기자신이 위치한 라인의 가로 폭 전체를 차지하며, 항상 새로운 라인에서 시작한다
가로크기와 무관하게 전체 가로 폭 영역만큼을 차지하게 된다.

HTML

<div>HTML5</div>
<div>CSS3</div>
<div>Javascript</div>

CSS
div {
height: 30px;
text-align: center;
border: 1px solid black;
dispaly: block;

inline

자기 자신 내용의 크기만큼만 너비를 차지한다.
따라서 새로운 라인에서 시작하지 않는다.

inline으로 지정된 요소는 블록성질을 잃기때문에 사이즈(width,heght)를 지정할 수 없다.

HTML

<div>HTML5</div>
<div>CSS3</div>
<div>Javascript</div>

CSS
div {
text-align: center:
border: 1px solid black;
display: inline;
}

inline-block

inline처럼 동작하나, 블록의 특성은 유지한다.
inline과 다르게 사이즈 (width, height)나 여백을 지정할 수 있다.

HTML

<div>HTML5</div>
<div>CSS3</div>
<div>Javascript</div>

CSS
div {
width: 100px;
height: 30px:
text-align: center;
margin: 10px;
padding-top: 10px;
border: 1px solid black;
dispaly: inline-block;