TIL - inline, block, inline-block

angrybirdpark·2022년 3월 1일
0

HTML/CSS

목록 보기
3/4

1. display: inline

한 줄에 여러요소를 나란히 배치한다.
기본 너비는 컨텐츠의 크기만큼 적용된다.
width, height, padding(상하), margin(상하) 적용 불가능
inline의 부모요소에 text-align 정렬 가능

2. display: block

한 줄에 한 요소만 배치, 다음 요소는 자동으로 줄바꿈
기본 너비는 100% 적용
width, height, padding, margin 적용 가능
margin값 조절로 정렬 가능

3. display: inline-block

inline의 특징과 block의 특징이 동시에 있는 속성
한 줄에 여러요소를 나란히 배치한다.
기본 너비는 컨텐츠의 크기만큼 적용된다.
inline의 부모요소에 text-align 정렬 가능
width, height, padding, margin 적용 가능

0개의 댓글