div 안에 div 텍스트를 덧대는 CSS 속성

Question

div 요소에 테두리 안쪽에 약간의 패딩을주는 방법이 있습니까? 예를 들어, 내 주 div 요소 안에있는 모든 텍스트는 요소의 테두리 가장자리로 바로 이동합니다. 이 사이트의 일반적인 규칙에 따라 텍스트와 경계 사이에 최소 10 ~ 20 픽셀의 공간을두고 싶습니다.

여기에 화면 내가 현재 무엇을 설명하기 위해 촬영의 :

Answer 1

나는 당신이 그 여기에 대한 답변을 많이 볼 div의 너비에서 빼기 및/또는 상자 크기 조정을 사용하면되지만, 필요한 div의 자식 요소에 패딩을 적용하면됩니다. 이 같은 일부 마크 업을한다면, 예를 들어, : http://jsfiddle.net/CHCVF/2/

: 여기

#text { 
    padding: 10px; 
} 

는 바이올린 차이를 보여주고있다 :

<div id="container"> 
    <p id="text">Find Agents</p> 
</div> 

당신이해야 할 모든이 CSS를 적용입니다

.container * { 
    padding: 5px 10px; 
} 

: 여러 요소가 그들에게 모두 같은 클래스를주는 기분하지 않는 경우 또는 더 나은 아직, 당신은 이런 식으로 뭔가를 할 수

모든 하위 요소를 선택하고 원하는 채우기를 할당합니다.여기에 행동의 바이올린이 있습니다 : http://jsfiddle.net/CHCVF/3/

Answer 2

그냥 원래 div 폭에서 40px을 div { padding: 20px; }를 사용 빼지.

div { 
    padding: 20px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

-moz-box-sizing

파이어 폭스를위한 것입니다

처럼 필립 윌스 당신은 대신 40px을 substracting의 box-sizing를 사용할 수 있습니다 지적했다.

Answer 3

Padding은 Div 내부에 여백을 추가하는 방법입니다.
그냥 당신이 사업부의 원래 폭에서 -20px 할 것,

div { padding-left: 20px; } 

사용하여 크기를 mantain 수 있습니다.

Answer 4

찾는 CSS 속성은 패딩입니다. 패딩 문제는 원본 요소의 너비에 추가되므로 300px 너비의 div가 있고 10px의 패딩을 추가하면 너비는 이제 320px가됩니다 (왼쪽에서 10px, 왼쪽에서 10px). 오른쪽으로).

이 문제를 방지하려면 상자 크기를 추가하십시오. border-box; div에 추가하면 패딩을 추가하더라도 지정된 너비가 유지됩니다.

div { 
    box-sizing: border-box; 
    padding: 10px; 
} 

당신이 상자 크기 조정에 대한 자세한 내용을보실 수 있습니다 그리고 여기 전체 브라우저 지원을이다 : 그래서 CSS는 다음과 같이 보일 것이다

http://www.paulirish.com/2012/box-sizing-border-box-ftw/