😊 inline/block/inline-block 는 어느 속성의 속성값 ?
display 의 속성값들이다.
🤨 각 display 속성값의 성질
-
블록
=> 언제나 새로운 줄에서 시작
=> 해당라인의 모든 너비를 차지 -
인라인
=> 새로운 라인에서 시작 X
=> 해당 태그의 content 만큼 너비를 차지
🤨 각 display 속성값을 갖는 대표적 태그
block ) <div>, <h1>, <p>, <ul>, <ol>, <form>
inline ) <span>, <a>, <img>🤨 inline / block / inline-block 차이
(inline)
- width/height 적용 X , margin/padding-top/padding-bottom 적용 X
- line-height 또한 적용이 잘 안된다고 한다.
(block)
- 무조건 한 줄을 점유하고 있어 다음 태그는 무조건 다음 줄에서 적용
(inline-block)
- width/height 적용 ok , margin/padding-top/padding-bottom 적용 ok
- line-height 적용 ok
일단 한다