[CSS] div 왼쪽으로 정렬하고 싶을때 2 (inline-block)

 

div로 레이아웃을 짜며 왼쪽 정렬을 하고 싶을 때 float:left를 이용하여도 되지만 

display : inline-block을 이용하여도 된다

 

 

 

인라인블록

 

인라인블록 :  내 폭과 높이만큼 자리 차지하게 해줘

 

기존 inline 요소와 마찬가지로 나란히 배치되지만 block 요소 처럼 width와 height 등 속성 지정이 가능하다

즉, block 요소를 따르면서 외부적으로는 inline요소가 되는 하이브리드 타입이다

그래서 레이아웃을 만들 때 사용되는 경우가 있긴하다

 

.left-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}

.right-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}

 

 

위와 같이 display 속성만 inline-block으로 설정하면 가로 배치가 가능하다

태그 사이에 스페이스 공백같은것을 그대로 보여주기 때문에 가로로 정렬하려면 태그 사이의 공백 제거해야한다

 

 

 

 

 

그렇다면 신경쓰는 법말고 공백을 제거하는 방법은?

 

 

 

1. 주석 사용

 

<div>
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

 

 

 

 

2. 부모의 폰트사이즈를 0으로 만들기

 

<div style="font-size : 0px;">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>