는 수평 컨테이너

정말 간단해야처럼이 보인다

의 100 %로 앵커 태그를 스태킹,하지만 난 CSS의 순간을 보내고있어 display은 inline-block이고 width은 33 %이다. 왜 마지막 줄이 새로운 줄로 떨어질까요?는 수평 컨테이너

CSS는

div { 
    width:100%; 
    background-color:pink; 
} 

a { 
    display: inline-block; 
    width:33%; 
    margin:0; 
    padding:10px 0px; 
}

this plunkr에서 볼 수있는 결과는 :

enter image description here

화면의 너비가 '99 % + 30px> 100 %'이기 때문에? 기둥의 결과 섹션을 더 넓게 만들면 모두 같은 줄로 끝납니다. –

패딩은 수직으로 만 적용됩니다. – recursive

건배. 그러나 나는 그것을 얻지 못한다. 패딩을 0으로 설정할 수 있으며, 여전히 랩하지 않기 위해 넓은 결과 섹션이 필요합니다. 왜? –

이 때문에 당신의 <a> 태그 사이의 공백 문자입니다. 모두 같은 줄에 놓으면 항상 적합합니다. 게시 한 스크린 샷의 차이를 확인할 수 있습니다. 녹색과 오렌지색 사이에 공간이 있습니다.

2014-07-10 21:26:59 recursive

빙고. 나는 그 공간이 왜 거기에 있었는지 궁금해서 마진과 패딩에 대해 망설였다. –

답변