web-dev-qa-db-ja.com

パディングとマージン、100％幅のHTML CSSボックス？

私は箱を持っています#box幅：100％、高さ：100％、パディング：5px、マージン：5px;ボーダー：5px;

HTML5レイアウトでそれを正しく表示する必要があります。

今私はそれを持っています：

enter image description here

しかし、私は体の領域にフィットブロックが必要です。

コード：

<!DOCTYPE html>
    <style>
    body,html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #box {
        width: 100%;
        height: 100%;
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
    }
    </style>

    <body>
    <div id="box">
    Text will be here
    </div>
    </body>
htmlcssbordermarginpadding
11
xercool

ブラウザはあなたが彼に言っていることを正確に行います:)しかし私はあなたがそれが持っているオーバーフローが好きではないと思います。

何が起こるかというと、境界線とパディングのために#boxが拡張されます。これらのプロパティをはめ込むことができるので、要素は拡張されません。これはbox-sizingで実行できます。

 #box {
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }

ただし、marginで同じことを行うことはできません。これは、要素がそれ自体を本体から押し出しているためです。つまり、想定どおりに機能します。

上記と同じことを行うことで回避策を作成できます。

body
{
    padding: 20px;
    box-sizing: border-box;
}

#boxの余白の代わりに本体のパディングを使用します。

jsFiddle

更新

二重のパディングスペースを防ぐには、body要素（またはhtml）にのみ適用する必要がありますが、最終的にはbodyが視覚要素であるため私はbodyを好みます。

33
nkmol

ボックスモデルの w3c仕様によると

ボックスタイプ要素のレンダリングされた幅は、その幅、左/右の境界線、および左/右のパディングの合計に等しくなります。

つまり、paddingとborder-widthの値が要素の合計幅に影響します。したがって、ここでは、パディングの15pxと、要素の実際の幅の100％の境界線の5pxを追加しています。

全体的にウィドウのサイズを超えているため、水平スクロールが付属しています。

3
Sachin

CSS box-sizingプロパティを使用する必要があります。

#box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
}

ただし、これを機能させるには、ゼロmarginを使用する必要があることに注意してください。

これがどのように機能するかについての良い説明記事があります： http://css-tricks.com/box-sizing/

CSS3を使用すると、境界線をインセットborder-shadowに置き換え、マージンを透明な境界線に置き換えることができます。このようにして、パディング、（偽の）マージン、ボーダーのすべてのパラメーターを制御できます。

#box {
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;
}

ここでライブフィドルを参照してください： http://jsfiddle.net/HXR3r/

2
keaukraine

Css calc（）を使用できます

#box {
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
    }
1
Saragoça

フィドル

あなたの問題は、あなたが気づいたことですが、heightsだけを想定しています

height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;

これにより、高さ= 100％+境界線（2 x 5）+パディング（2 x 15）+マージン（2 x 20）=100％+（10 + 30 + 40）px

これは100%...以上です。したがってfit block in body area.はありません。より良い結果を得るには、高さをパーセンテージで減らしてみてください。

幅も同様です!!

0
NoobEditor

box-sizing: border-box;にAdd#boxプロパティを追加し、margin: 20px;を削除する必要があります

更新されたCSSは次のとおりです。

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#box {
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

作業フィドル

0
UID