[CSS] inline, block, inline-block

인라인(inline)

- 한 줄에 여러개 배치

- 기본 너비값은 텍스트의 너비값을 가짐, 즉 요소들의 너비값을 가짐

- 크기값(width, height)값 적용 불가

- margin을 주면 상하 값은 적용되지 않음, 좌우로만 적용

ex) span, a, br, sup, em 등

a{
    color: #000;
    width: 100px;
    height: 100px;
    margin: 100px;
}

 

블록(block)

- 한줄에 한개만 배치

- 기본 너비값은 100%를 가짐

- 크기값(width, height)값 적용 가능

- 인라인 요소와 다르게 margin을 상, 하, 좌, 우에 줄 수 있음

ex) div, p, table, header/footer, nav 등

div{
    border: 1px solid red;
    height: 100px;
    margin: 50px;
    /* width: 100%; */
}

 

인라인 블록(inline block)

- 인라인 + 블록

- 기본 너비값은 컨텐츠 너비값

- 한 줄에 여러개 배치 + 상하좌우 마진

- 크기값(width, height) 가질 수 있음

ex) img 등

 

display 속성을 사용해 요소 변경하기

(1) inline -> block

a{
    color: #000;
    text-decoration: none;
    border: 1px solid gray;
    display: block;
}

 

(2) inline -> inline-block

a{
    color: #000;
    text-decoration: none;
    border: 1px solid gray;
    display: inline-block;
    text-align: center;
    width: 200px;
    border-radius: 5px;
    padding: 5px;

}