display: inline-block으로 인한 간극적 사고

<ul class="demo01">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

.demo01{width:327px; margin:0 auto;}
.demo01 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999;}

1

2

3

코드 레이코드 - v1.1
설명해야 할 것은 디스플레이: inline-block은IE에서layout만 터치했을 뿐, 이것은 줄 레이아웃이었다. 터치한 후에도 블록 요소는 줄 레이아웃이었다.따라서 블록 요소를 내연 대상으로 전달하고 디스플레이:inline은 이 역할을 한다(*호는 i6, 7에 의해 식별된다). 그리고zoom:1을 통해layout을 촉발한다.이른바 인라인블록을 실현할 수 있다.그러나 일이 아직 끝나지 않았습니다. 이 녀석은 여러 가지 뒷일을 처리해야 합니다. 예를 들어 바깥 거리가 있는 것을 묵인합니다(ie6, 7 제외).이 문제에 앞서 긴장을 풀고 아래의 현상을 살펴봐야 할지도 모른다.

2. 무엇이 간극을 일으켰는가

위에서 언급한 바와 같이 inline-block에 기본적으로 간극이 존재하지만, 그 중의 어떤 요소에 대해 Margin-bottom이나padding-bottom을 단독으로 설정하려고 시도할 때 (물론 당신도 Margin-top 또는padding-top을 설정하려고 시도할 수 있다) 다음과 같은 모델을 나타낼 수 있다.
이것은 무엇을 의미합니까?우리는vertical-align:top를 빌릴 수 있다.이 속성은 수직 간극을 제거한다.
이렇게 많은 기이성이 우리로 하여금 css에 대한 호기심과 이해심으로 가득 차게 하는데 아마도 그래서 부동식 구조를 주류로 만들었을 것이다.글의 첫 부분에서 언급한 바와 같이 inline-block은 빈칸을 허용한다. 이것은 또 무엇을 의미하는가?한 차례의 분석 후에 우리는 놀랍게도 주범은 줄을 바꾸는 것을 포함한 공백부라는 답을 얻었다.
그래서 우리는 즉시 빈칸, 줄 바꾸기 등을 없애고 그 결과 이런 추측의 정확성을 검증했다.그러나 이것은 좋은 해결 방안이 아니다. 복잡한 html 조합체 사이에서 우리는 줄 바꾸기와 같은 빈칸이 생기는 것을 피하기 어렵다.결자해지, css로 인한 현상은 css 자체가 해결해야 하지 않겠습니까?

3. 최종 통일

그렇게 지도 모른다, 아마, 아마...너무 많이 떠드는 것이 꼭 좋은 것은 아니다. 차라리 우리가 필요로 하는 최종 모형을 보자!

 

 

 

 

 

 

 

 

 

 

.demo02{width:306px; margin:0 auto; font-size:0;}
.demo02 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top; font-size:12px;}

1

2

3

코드 레이코드 - v1.1
이 문제를 악수하게 한 것은 font-size:0이다.그의 역할은 여분의 공백을 없애는 것이다. 물론 이것은 모든 하위 요소의 텍스트를 함께 사라지게 할 수 있기 때문에 하위 요소에 font-size:12px를 추가해야 한다.