inline-block 사용하여 기본 레이아웃 만들기

block 과 inline-block의 차이

display : block 

한 행을 전부 차지

 

display : inline-block

내 크기만큼 차지

 

inline-block의 문제점 

문제점 1   태그 사이에 띄어쓰기가 있으면 요소가 한줄을 통째로 차지해버린다!

- inline-block은 내 크기만큼 차지하므로 내 크기만큼 차지한 left와 content사이에 html 상의 띄어쓰기가 한칸이라도 있으면 

(left 20% + content 80% + 띄어쓰기 ?  => 100% 초과 ! => left와 content가 한 줄 안에 

left와 content사이에 띄어쓰기때문에 칸이 바뀌어버림

 

 

해결방법

 

1. 주석을 넣는다.

   <div class="container">
      <div class="header"></div>
      <div class="left"></div><!--일부러 넣은 주석
   --><div class="content"></div>
      <div class="footer"></div>
    </div>

 

2. container의 font-size를 0px로 조정한다.

   <div class="container" style="font-size:0px">
      <div class="header"></div>
      <div class="left"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>

 

 

문제점 2   inline-block 박스 안에 글을 쓰면 박스가 찌그러져 버린다 (우씨..)

baseline이 옆에 존재하면 display:inline-block 요소들이 baseline 위에 오려고 한다.

해결방법

 왼쪽 박스에 vertical-align:top; 설정하면 된다.

 

 

See the Pen inline-block by JEONG (@cona) on CodePen.