[Html] inline, block, inline-block tag

12 Nov 2022 in Development on Html

inline tag
block tag
inline-block tag
Reference

inline tag

줄 바꿈 없이 다른 요소들과 함께 한 행에 위치
텍스트 중 특정 단어만 굵게 표현할때나 백그라운드 색상을 넣을때 주로 사용
margin과 padding 속성은 좌우 간격만 반영되고 상하 간격은 반영 X
너비(width)와 높이(height) 속성이 무시 -> 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 설정
ex) <a> <span> <b> <em>

block tag

한 줄을 완전히 차지
기본적으로 너비 100%(width:100%)속성을 가짐
margin, width, height, padding 속성을 정의하면 모두 적용 가능
모양을 쉽게 제어가 가능해 대부분 블록 속성을 가진 태그를 사용해 화면 구성
ex) <p> <div> <ul> <li> <h1~6>

inline-block tag

inline 엘리먼트처럼 전후 줄 바꿈없이 한줄에 나란히 배치
block 엘리먼트처럼 width, height, margin, padding 속성의 상하 간격 지정 가능
내부적으로는 block 엘리먼트 규칙, 외부적으로는 inline 엘리먼트 규칙을 따름

Reference

https://velog.io/@shin6403/CSS-inline-inline-block-block-%EB%9E%80
https://rgy0409.tistory.com/4670