CSS part 1 - (5) Inline-Block

Box

- Block

- Inline

- Inline Block

- Flex

 

 

 

display 속성

- box 의 속성을 바꿔줌.

 

모든 html 요소는 box로 표현되므로

display를 가지고 있음.

 

 

---

Inline Block

 

Inline 과 Block의 좋은 점을 합친 느낌.

 

지난 inline box 예제에서

<span>의 display를 inline-block으로 설정해주자.

 

 

 

span {
	display: inline-block;
}

 

 

display: inline (span의 default값) 일때는

 

 

❌❌❌❌ 사용불가 ❌❌❌❌

width , height padding (top/bottom) border (top/bottom) margin (top/bottom)

 

 

위와 같은 특성때문에 padding-bottom을 해주면

 

위와 같이 이상한 결과가 나왔다.

 

 

 

 

 

 

이제, inline-block은 어떨지 살펴보자.

padding-bottom을 50px로 설정해주면

 

아래 텍스트를 덮어버리는 이상한 형태가 아니라

텍스트가 아래로 밀리면서, block과 같은 역할을 한다.

 

즉, inline 이면서 block과 같은 역할을 하는 것.

 

- block 처럼 top/bottom box model값 부여 가능

- inline 처럼 옆으로 늘어짐

 

 

+) width, height도 적용 가능

 

 

** 총정리

 

inline-box는 inline처럼 흐르고 있지만

block처럼 (위/아래) 영역도 설정할 수 있다!

 

 

 

 

---

CSS part 2 - Float (가로 배치)