web-dev-qa-db-ja.com

全幅を変更せずにパディングを追加

事前定義された幅の上に追加せずに要素にパディングを追加するにはどうすればよいですか？

列の幅を定義して、レイアウトのクリーンなグリッドを作成することをお勧めします。また、列内のコンテンツにパディングを追加したいと考えています。それを指定する方法はありますか？

cssgridoverflowpadding
16
user2119834
element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
25
Linus Caldwell

ボックスサイズを使用すると、パディングが含まれるようになります： https://developer.mozilla.org/en-US/docs/CSS/box-sizing

例：

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

これはIE7では機能しないことに注意してください。

IE8の場合は、このQのトップアンサーを参照してください： box-sizing：border-box => for IE8？

10
Kyuuji

ブロック要素にパディングを追加するたびに、この要素の幅が変わります。この問題には多くの解決策があります。私は通常、最初の子要素にmarginを設定し、この要素にwidth: 100%を設定します。

たとえば、次のようになります。

<div id="main">
    <div id="child">
        This is content with margin
    </div>
</div>

これらの要素のCSSスタイル：

#main {
    border: solid 1px red;
    float: left;
    width: 5em;
}

#child {
    border: solid 1px blue;
    float: left;
    width: 100%;
    margin: 0.5em;
}

これはあらゆるブラウザ向けのソリューションです

3
AlexN

それは古いスレッドです、私は知っています。しかし、前回、幅が設定されておらず、パディングが設定されたDIVを作成することについて完全なブラックホールがあったので、3列の行とCSS2を爆破することはありません。そこで、フロートを左に、右に、フロートを持たず、幅が固定されていないDIVを1つ配置しましたが、パディングが必要でした。どのようにそのことについて...

あきらめた。 ：Dしかし、中央のDIVに内側のDIVを配置し、width = 90％にします。これまでのところ、非常にシンプルで優れたソリューションではありませんが、必要な外観を実現するのに役立つ場合があります。 ;]

b.r.

0
siudek