css display 속성 - inline, block, inline-block, none

css display 속성은 요소가 공간을 어떻게 차지할 것 인지를 나타내며 inline, block, inline-block, none을 사용할 수 있습니다. 각각의 속성 값에 따라서 width, height, padding, margin의 적용 여부가 달라집니다.

 

lnline 특징

 

span {
        background-color: aqua;
        width: 500px;
        height: 500px;
        padding: 10px;
        margin: 10px;
}

 

lnline-특징

 

inline은 다른 요소를 밀어내지 않고 콘텐츠의 크기만큼 공간을 차지합니다. width, height는 적용이 되지 않고 padding은 적용이 되지만 공간을 차지하지 않고 margin은 좌우만 적용이 되고 상하는 적용이 되지 않습니다. 참고로 span은 기본적으로 lnline입니다.

 

block 특징

 

h1 {
        background-color: burlywood;
        width: 300px;
        height: 300px;
        padding: 50px;
        margin: 50px;
 }

 

block-특징

 

block은 다른 요소를 밀어내고 한 줄의 공간을 차지합니다. width, height, padding, margin 모두 적용됩니다. 참고로 h1은 기본적으로 block 입니다.

 

inline-block 특징

 

div {
        height: 200px;
        width: 200px;
        background-color: olivedrab;
        border: 5px solid black;
        display: inline-block;
        margin: 50px;
}

 

inline-block-특징

 

inline-block은 공간을 차지하는 부분에서는 inline과 같지만 block의 특징도 가지고 있습니다. width, height, padding, margin 모두 적용됩니다.

 

none 특징

 

none은 화면에서 보이지 않고 공간을 차지하지 않습니다.

 

요약

 

inline

1. width, height x
2. padding O - 공간을 차지하지 않는다.
3. 마진 좌우 O 상하 X

 

block

1. width, height O
2. padding O
3. margin O

 

inline-block

1. width, height O
2. padding O
3. margin O