css - inline-block div でパディングが正しく適用されない

Question

ここで例を見ることができます：

私は 100px (全方向) のパディングを、portfolio_item クラス (そのページの 3 項目) に設定しました。上、下、左のパディングが適用されます。しかし、正しいパディングは機能していないようです。テキストが div の境界を超えています。

.portfolio_item {
    width: 100%;
    clear: both;
    display: inline-block;
    padding: 100px;
}

div を display:inline-block の代わりに float:left に変更しようとしましたが、それは役に立ちませんでした。

アイデアを歓迎します。

ありがとう、ウェズリー

score 2 · Accepted Answer

box-sizing: border-box;あなたに適用すると.portfolio_item、問題が解決するはずです。これが最新のすべてのブラウザーで機能するには、特定のベンダープレフィックスを含める必要があります。

.portfolio_item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

score 0 · Accepted Answer

複数の親要素 ( .outanb .in) がoverflow: hidden;適用されています。コンテナ全体の幅が 800 ピクセルに設定されているため、コンテンツの右側が非表示になっています。パディング自体は機能します。現在のセットアップでは表示されません。

<div style="width:800px; border:2px dashed red;">
    <div class="out">
        <div class="in">

<!-- … -->

score 0 · Accepted Answer

内部の幅を 100% に設定していますが、パディングを使用すると、実際の幅は 100% + 200px になります。変更することをお勧めします

width: 100%;

に

width: 600px;

または、パディングを次のようなパーセントに変更します。

width: 80%;
padding: 10%;

score 0 · Accepted Answer

パディングを div に適用する代わりに、テキストを具体的に対象にします。テキストを「p」タグに配置し、CSS で呼び出します。

.portfolio_item p{
     padding: 100px;
}

score 0 · Accepted Answer

あなたはこのように与えることができます、

 .portfolio_item {
        clear: both;
        display: inline-block;
        padding: 100px;
        width: 87%;
    }

5 に答える 5