[CSS] inline, inline-block

 

display의 속성 

 **Block vs Inline**

 

 

 

※Question : inline에 padding을 적용할 수 있을까?

■ Answer : 반은 맞고 반은 틀렸다. 좌우로는 패딩이 적용되나 싶은데, 
상하로는 line-height 영역을 침범한다. (다른 줄의 base-line)

그렇다면 inline 요소의 성질을 유지한채로 block의 속성까지 갖을 수 있을까?
(block은 width, height 값이 먹고, padding 값을 먹으니까)

 

Inline-block이 해결해준다. 말 그대로 inline + block (하이브리드)

 

inline-block 패딩을 통해서 상하로 밀수 있음

 

 

---

• em상자의 높이는 어떻게 결정되는가?

em  : 하나하나 글자 영역

=> content 영역의 크기는 font-size로 결정된다 

 

 

• line-height : 베이스라인과 베이스라인의 사이 거리를 이야기함 

 

 

 

• inline 상자의 구성 

• 콘텐츠 area : 14px 
• line-height : 21px
• line-height가 들어오면 inline 상자가 확장된다. 

+ border를 치면 14px인 컨텐츠 영역에 들어감
+ padding을 넣어도 컨텐츠 border 안에 들어간다 

 

 

Question : inline에서 line-height를 쓰면 세로 길이가 확장되는가?
Answer :  YES

line-height를 쓰면 말그대로 위아래 값이 길어짐 (패딩 상하를 주는 것과 같은 효과)

 

 

인라인 켄텐츠와 border사이에 공간이 생김 (파란색 상자가 컨텐츠 영역)

 

 

 

---

 

vertical-align이란?  middle을 하면 베이스라인을 따르지 않고 자기의,

소위 말해 알파벳 중간에 맞추는 것이다

 

 

*문제는 완전히 맞지않는다 알파벳 크기는 다 다르니까

해결방법 : vertical-align: 으로 px을 직접 써야한다.

언젠가 vertical-align을 줘야하는 상황이 있을 것이다.