반투명 이미지 오버레이 용 p- 태그의 패딩

Question

패딩이 필요한 텍스트 블록을 오버레이해야하는 div 안에 img이 있습니다.

이미지를 최대 높이로 자르기해야하기 때문에 외부 div 태그에 오버플로 : 숨김이 있습니다.

내 바이올린을 보면

http://jsfiddle.net/Py49n/1/

당신은 P-태그가 100 %의 폭을 가지고 있기 때문에 P 태그 안의 텍스트가 오른쪽으로 멀리에 기록됩니다 것을 확인할 수 있습니다 + 패딩.

p 태그를 넓게 만들지 않고 텍스트 여백을 만들려면 어떻게해야합니까? 상자를 수 있도록 도움

Answer 1

사용 box-sizing: border-box (적절한 접두사)에 대한

덕분에 패딩을 포함 할 수있는 크기한다. CSS-Tricks에 대한 자세한 정보. 브라우저 지원은 pretty good입니다. IE7을 지원해야하는 경우 다른 솔루션, 대개 polyfill이 필요합니다.