본문 바로가기
> 메모/CSS

[CSS] display: inline 과 inline-block 차이

by 자몽주스 2024. 6. 17.
728x90
display: inline 하고
display: inline-block 차이

display: inline
= 딱 자기 컨텐츠 영역만 차지
= 가로 정렬이 된 것처럼 보임.
= 높이가 지정이 안됨.
- 높이를 지정해도 설정이 되지 않음.


display:inline-block
- 자기 컨텐츠 만큼 차지
- 높이 값 지정 가능
= 인라인 요소지만, 블록 속성 가짐.
= 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리
블록 속성이 추가돼서 하위 값을 지정할 수 있음.
= 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임.
= 중간에 인라인 요소가 끼어든다면,
해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨.

 

728x90

'> 메모 > CSS' 카테고리의 다른 글

[CSS] padding 축약 설정  (0) 2024.06.23
[CSS] Pseudo, 이벤트 정리  (0) 2024.06.17
[CSS] position의 사용법  (0) 2024.05.13
[CSS] rem 또는 em 계산 방법 (변환)  (0) 2024.04.22
[CSS] li들 사이에 간격 주고 싶을 때  (0) 2024.03.29