CSS inline. inline-block. block 차이

• CSS

NILGI 2019. 12. 4. 00:01

display: inline;

display: inline-block;

display: block;

요소를 나열하는 방법이다. 쩌~~~ 번에 이에 관한 공부를 한적이 있다.

HTML 블록과 인라인

요소의 표시 방법에는 블록 구조와 인라인 구조가 있다. 이 두 단어는 스킨 편집 할 때 몇 번 들어봤다. - 블록 구조 정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다. 블록 구조의 태그 address article a..

nilgi.tistory.com

한번 봐주고 다음으로 넘어가는게 좋겠다. 실시간으로 글을 막 쓰기에 보고 다시 글을 쓴다.

inline은 가로 나열이다. 요소와 요소 사이에 공간이 없고 css를 보면 알 수 있듯 요소의 크기를 지정해도 반영되지 않는다.

inline은 width, height, margin, padding-top, bottom, line-height를 적용할 수 없고 inline-block은 inline의 단점을 보완하여 적용 가능합니다.

lnline-block과 block은 크기를 지정할 수 있다.

inline-block은 가로 나열이고 요소 사이에 공백이 있다.

block는 세로 나열이고 요소 사이에 공백이 없다.