divs 대 테이블의 기준선 (세로 맞춤 목적의 경우)

Question

this JSFiddle을 참조하십시오. 여기에 코드의 관련 발췌 :

<div class="container"> 
    <div class="box"> 
     <div>fg</div> 
    </div>hj</div> 

<div class="container"> 
    <div class="box"> 
     <table><tr><td> 
      fg 
     </td></tr></table> 
    </div>hj</div> 

CSS :

div.box { 
    display:inline-block; 
} 

마지막 예에서 못생긴 틈이 동안 첫 번째 예는, 아니 "센더 격차"가없는 방법을 참조하십시오.

이것은 div의 기준선 (또는 div의 임의의 중첩)이 포함 된 텍스트의 기준선으로 정의 되었기 때문에 나타납니다. 그러나 표의 기준선은 표의 맨 아래에 있습니다.

이 동작은 div 및 테이블뿐만 아니라 모든 요소에 대해 지정됩니까? 어디에? 구성 가능합니까?

Answer 1

이것은 테이블 속성 때문입니다. 이 시도 :

table { 
    display: inline-block; 
    border: 1px solid blue; 
} 

Answer 2

당신이 다른 한쪽 블록 내용에 인라인 내용으로 시험을 할 경우 발생하는 차이가 있습니다.

테이블을 인라인 테이블로 설정하고 수직 정렬을 상단 또는 하단으로 재설정하여 기준선에 서 있지 않습니다.

DEMO

div, table, tr, td { 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
div.container { 
    border: 1px solid green; 
} 
div.box { 
    display:inline-block; 
    width:50px; 
    border:1px solid red; 
    padding:0; 
    margin:0; 
    background: #fee; 
} 
table { 
    display:inline-table;/* keep its table-layout properties intact */ 
    width:100%;/* fill all width avalaible at least */ 
    border: 1px solid blue; 
    vertical-align:top; /* or bottom to avoid gap under baseline*/ 
}