html - 半透明の画像オーバーレイの p-tag のパディング

Question

パディングが必要なテキストブロックをオーバーレイする必要があるimg場所があります。div

外側の div タグには、overflow:hidden が含まれています。これは、画像を最大の高さにトリミングする必要があるためです。

私のフィドルを見たら

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

p-tag の幅が 100% + パディングであるため、p-tag 内のテキストが右端に書き込まれていることがわかります。

p-tag を広くせずにテキストに余白を作るにはどうすればよいですか?

助けてくれてありがとう

Answer 1

(および適切な接頭辞) を使用box-sizing: border-boxして、パディングを含むようにボックスのサイズを変更できるようにします。CSS-Tricks の詳細情報。ブラウザのサポートはかなり良いです。IE7 をサポートする必要がある場合は、おそらくポリフィルなどの別のソリューションが必要になります。