패딩은 항상 밀어 내 컨테이너

Question

<ul> 
<li><a href="">ddgdfgdfgdfg</a></li> 
<li><a href="">ddgdfgdfgdfgsdfdsfdsf</a></li> 
<li><a href="">ddgdfg</a></li> 
</ul> 

CSS의 폭 증가 :

리 {폭 : 120 픽셀을; padding-left : 10px;}

왼쪽에 10px 패딩이 있지만 텍스트가 120px 경계를 넘어서고 130px 크기의 컨테이너가됩니다. 이상적으로는 양쪽에 10px 패딩이 필요하여 텍스트 링크에 ​​100px를 남깁니다. 그리고 나는 그 텍스트를 감싸서 내리고 싶다. 그러나 그것은 일어나지 않습니다.

Answer 1

패딩은 항상 W3C 상자 모델의 상자 너비에 추가됩니다. 폭을 지정하거나 폭을 원하는 폭으로 설정하지 마십시오. 또한 Sandeep은 자신의 답변에서 긴 연속 문자열을 끊을 수 있도록 단어 줄 바꿈을 구체적으로 설정해야 할 수도 있음을 보여줍니다.

Answer 2

쓰기 :

li{ 
width:100px; 
padding:0 10px; 
word-wrap:break-word; 
} 

패딩 항상 요소에 폭을 추가 & 테두리.