CSS 인라인 블록이 여백 또는 패딩을 준수하지 않습니다.

Question

"display : float"대신 "display : inline-block"을 실험했습니다. 내가 발견 한 모든 문서는 블록 요소에 일반적으로 적용 할 수있는 속성을 "인라인 블록"요소에 적용 할 수 있다고 말합니다. 특히 "높이", "너비", "여백"및 "채우기"가 항상 나열됩니다.

높이와 너비 설정은 확실히 저에게 효과적입니다. 웹에서 "인라인 블록"을 설명하는 모든 예가 하나 또는 둘 다 설정되어 있기 때문에 다른 모든 사람들도 생각할 것입니다.

그러나 여백이나 여백 설정은 IE9 또는 Firefox 32에서 전혀 효과가없는 것으로 나타났습니다.

콘텐츠의 너비가 다양하기 때문에 여백과 패딩을 사용하고 싶습니다. 간과 한 예가 있습니까?

이

내가 가장 최근에 연주 한 내용의 발췌 한 것입니다 :

.lnk2 a { 
display: inline-block; 
margin: 2px 1em; 
padding: 2px 2em; 
} 

<div class="lnk2"> 
<a href="rates/minneapolis-55401.htm">55401</a> 
<a href="rates/minneapolis-55402.htm">55402</a> 
<a href="rates/minneapolis-55403.htm">55403</a> 
</div> 

"여백"또는 "패딩"에 사용되는 값은 중요하지 않습니다. 두 브라우저에서 실제 디스플레이가 변경되지 않습니다.

또한 원래 HTLM의 "div"는 "ol"이었고 각 "a"는 "li"쌍으로 묶여있었습니다. 같은 결과 - 위의 HTML은 문제가 더 가까워지면 상황을 조금 단순화하려고합니다.

Answer 1

또한 원치 않는 공간

.lnk2 a { 
display:block; 
float:left; 
margin: 2px 1em; 
padding: 2px 2em; 
}