꼼지락거리기

디스플레이 속성 (inline, inline-block, block) 4가지 특징

튼튼한간 2023. 2. 21. 10:29

디스플레이 속성 4가지 특징

1️⃣ 기본 너비 값

2️⃣ 한 줄에 하나 or 여러 개

3️⃣ 크기 값 (너비, 높이)

4️⃣ 상하 마진

 

  • 인라인 요소 (Inline Elements)

➡️ 글자를 개별적으로 꾸미는 서식에 관련된 태그들

span, a, b, strong, mark, map 등

➡️ 기본 너비 값 : 컨텐츠 너비 값 / 한 줄에 여러개  / 크기 값 ❌ / 상하 마진 ❌

 

  • 블록 요소 (Block Elements)

➡️ 레이아웃에 관련된 태그, 목록, 제목, 테이블, 시멘틱태그(헤더, 푸터, 메인, 섹션 등) 

div, p, table, ul, ol 등

➡️ 기본 너비 값 : 100% / 한 줄에 하나만 배치 / 너비 값, 높이 값 ⭕ / 상하좌우 마진 ⭕

 

  • 인라인 블록 요소 (Inline Block Elements)

➡️ 이미지를 비슷한 대부분의 폼 요소(버튼, textarea, select 등)  ✔️label은 인라인 요소

img, input, button, textarea, Font Icon태그, video, audio 

➡️ 기본 너비 값 : 컨텐츠의 너비 값 / 한 줄에 여러 개 배치 / 크기 값 ⭕ / 상하좌우 마진 ⭕

 

(상하) 마진 겹침 현상 : 둘 중에 더 큰 마진으로 마진을 취하는 것