TIL inline, inline-block, block

inline 요소들

<span>, <a>, <img>, <b>, <i>, <br> 태그 등

컨텐츠가 있는 지점까지의 넓이만 차지한다.
width, height 지정이 안된다.

block 요소들

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 태그 등

좌우 양쪽으로 최대한 많은 넓이를 차지한다.

inline <-> block

inline 요소와 block요소는 Css로 변환이 가능하다.

- < inline -> block 바꾸기 >

div {
display:block
}

- < block -> inline 바꾸기 >

div {
display:inline
}

inline-block

inline 요소와 block요소를 동시에 갖춘 display속성이다.

줄바꿈이 되지 않고 width와 height 지정이 가능하다.