CSS display — block · inline · inline-block 완전 정리

 

 

Web Development · CSS Display

CSS display —
block · inline · inline-block 완전 정리

박스 형태를 결정하는 가장 기본 속성 + 가로 메뉴 만들기

#block img { display: block; } /* 인라인을 블록으로 */ nav ul li { display: inline-block; } /* 가로 메뉴 */

---

1 3가지 핵심 display 값

block

한 줄 통째로
다음 요소는 새 줄
width/height OK
div, p, h1, ul, section

inline

글자처럼 흐름 안
같은 줄에 이어짐
width/height 무시
span, a, em, strong, img

inline-block

글자처럼 + 박스 속성
같은 줄에 + width/height OK
가로 메뉴·버튼 그룹

인라인 흐름: inline 1 글자 사이에 inline 2 끼임

inline-block 1 inline-block 2 inline-block 3

block — 한 줄 통째

block — 다음도 새 줄

---

2 가로 메뉴 만드는 정석

ul/li는 기본이 세로다 (li가 block). 메뉴를 가로로 만들려면 li를 inline-block으로.

nav ul { list-style: none; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li a { color: white; text-decoration: none; }

• 애완견 종류
• 입양하기
• 건강돌보기
• 더불어살기

---

3 inline vs inline-block 차이

속성	inline	inline-block
흐름	같은 줄	같은 줄
width / height	무시 (내용 크기)	적용 가능
margin (상하)	무시	적용
padding (상하)	적용은 되나 line-height 영향	정상 적용

---

4 다른 display 값들

값	역할
none	완전 숨김 (공간도 사라짐)
flex	모던 레이아웃 — 1차원
grid	모던 레이아웃 — 2차원
table	표처럼 동작

※ visibility: hidden은 안 보이지만 공간 차지. display: none은 공간도 없어짐.

반응형

---

5 모던 — flex/grid가 표준

2026년 기준 가로 메뉴는 display: flex가 더 우아하다. inline-block의 공백 문제가 없고 정렬이 쉬움.

nav ul { display: flex; gap: 20px; } /* 모던 표준 */

---

핵심 한 줄 요약

block한 줄 통째 — div, p, h1

inline글자처럼 — span, a, em

inline-block글자처럼 + 박스 — 메뉴 버튼

none완전 숨김 (공간도 X)

flex / grid모던 레이아웃 표준

가로 메뉴li에 inline-block 또는 ul에 flex

Tags

#display #block #inline #inline-block #none #flex #nav #CSS #HTML #레이아웃 #메뉴 #박스타입 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

display, block, inline, inline-block, none, flex, nav, CSS, HTML, 레이아웃, 메뉴, 박스타입, 웹개발, 티스토리