여백을 추가하면 자매 요소에 동일한 여백이 생깁니다.

Question

이 가운데에있는 탐색 모음을 만들었으므로 링크에 :active 상태를 추가하려고 했으므로 밀어 넣은 것처럼 보이게하여 a 요소에 margin-top:2px을 추가했습니다.

<ul> 
    <li>Previous</li> 
    <li>1</li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li>...</li> 
    <li><a href="#">Next</a></li> 
</ul> 

---

문제는 왜 다른 a 요소도 난 단지 현재 클릭 중의 요소에 할당 된 경우에도 마진 탑이있다인가?

---

ul { 
    text-align:center; 
} 
li { 
    color:#555+60; 
    display:inline; 
    font-size:18px; 
    padding:0 4px; 
} 
li:first-child,li:last-child { 
    border:1px solid #bbb; 
} 
a { 
    display:inline-block; 
    color:#555; 
} 
a:active { 
    margin-top:2px; 
}​ 

JSFiddle : 당신은 실제로 모든 a 요소에 여백을 추가하지 않을http://jsfiddle.net/Pxmp3/

Answer 1

은, 오히려이 인라인 블록 요소들이 줄 높이를 주어의 행동 방식, 수직 정렬입니다

li 요소를 인라인으로 렌더링하고 있습니다. 노드를 통과하는 기준선을 그려 봅니다. 이제 노드 중 하나의 하위 노드를 2px 아래로 밀어 넣을 때 은이 기준선을 방해 할 수 없으므로이 기준선을 균일하게 푸시하고 나머지 버튼을 시각적으로 표시합니다 . 당신은 그것의 렌더링 특성에 익숙해 질 때까지 내가 inline-block의 적지 않은 사용을 피하는 게 좋을 것

은 - floating 또는 position:relative