수직 정렬

Question

는 다음과 같은 HTML/CSS를 고려하십시오. 빈 녹색 상자는 그렇지 않습니다. 다른 두 개의 상자 위에 나타납니다. 나는 녹색 상자에 텍스트를 추가하는 경우,이 동작이 중지되고 모든 라인까지 내가 원하는 방식으로.

이 IE8 (표준 모드)에서 지속적으로 발생, 파이어 폭스 3.0과 크롬, 그래서 내가 이해하지 못하는 빈 인라인 블록 요소가있는 특성이 있으리라 믿고있어.

나는 수직 정렬 속성을 지정하여 상자를 정렬 할 수는 없지만 다음 네 개의 텍스트 값이 더 이상 정렬됩니다. 이견있는 사람? 나는이 하나에 난처하다. 녹색 색상의 범위 안에  를 추가

Answer 1

보십시오.

Answer 2

a 
<span style="background-color:blue;">b</span> 
<span style="background-color:green;">&nbsp;</span> 
<span style="background-color:red;">c</span> 
d 

Answer 3

스팬 상단 정렬 다음 음수 여백을 패딩과 동일하게 지정하면 비공개 공간 해킹이 필요 없습니다.

span 
{ 
    display:inline-block; 
    width:5em; 
    height:5em; 
    padding:1em; 
    vertical-align:top; 
    margin-top: -1em; 
} 



a 
    <span style="background-color:blue;">b</span> 
    <span style="background-color:green;"></span> 
    <span style="background-color:red;">c</span> 
d