CSS：ブラウザが正しくパディング％を計算していない

レスポンシブウェブデザインスキルをテストするための非常に基本的なHTMLとCSSページを作成しましたが、パディングの計算がうまくいかず、人々からの援助は非常に高く評価されます。CSS：ブラウザが正しくパディング％を計算していない

下記のコードをご覧になりました。私は1つの「メイン」と「セクション」とそれに「脇」を持っています。両方の内部には2つの異なるサイズのボックスがあります。私はボックスのサイズとマージンを計算しましたが、パディングは正しく機能しません。この場合、最初のボックスは25pxパディング/ 500px = 0.05（5％）、2番目のボックスは25px/300px = 0.08333333（8.333333％）のtarget/context = resultでパディングを計算しました。しかし、これは25pxのパディングを引き起こすのではなく、はるかに大きなパディングを作成します。 Google Chromeデベロッパーツールを見ると、最初のボックスのパディングが56.875px、2番目のボックスのパディングが94.797pxであることがわかります。

私はいつもこれを解決しようとしていましたが、今は別のものを試していますが、それを把握することはできません。

これに関するお手伝いがあれば幸いです。コードは以下のとおりです。

body, section, aside, p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
main { 
 
    width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */ 
 
    background-color: lightgreen; 
 
    min-height: 1000px; 
 
    margin: 0 auto; 
 
} 
 

 
section { 
 
    height: 500px; 
 
    width: 44.067133%; /* 500/1137.590 */ 
 
    background-color: green; 
 
    float: left; 
 
    margin: 04.398736%; /* 50.031/1137.590 */ 
 
    padding: 5%;/25/500 */ 
 

 
} 
 

 
aside { 
 
    height: 300px; 
 
    width: 26.434279%; /* 300/1137.590 */ 
 
    background-color: blue; 
 
    float: right; 
 
    margin: 04.398736%; /* 50.031/1137.590 */ 
 
    padding: 8.3333333%; /* 25/300 */ 
 
    color: lightblue; 
 
}

<body> 
 
    <main> 
 

 
    <section class="box-green"> 
 
     <p>This is a green box</p> 
 
    </section> 
 

 
    <aside class="box-blue"> 
 
     <p>This is a blue box</p> 
 
    </aside> 
 

 
    </main> 
 
</body>

出典

2017-10-23 Niall Tuohy

注意。 [mcve] – Rob

ああ、お会いできてよかったです。ありがとう –

SASSまたはLESSの使用を検討して、スタイルシートで変数を使用することができます。 –

パーセントで与えられたパディングは、含有する要素ではない要素自体の高さに基づいています。

出典

2017-10-24 00:04:16 rjustin

うわー、うまくいきました。私はマージン％を計算する方法だと思っていましたが、パディングについては要素自体のサイズを使用します。私はちょうどその奇妙な正確な点を述べたオンラインコースを取った。 –

あなたは割合にパディングを計算する場合、その量は含むブロックの幅、高さではないことによって算出されます。

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

出典

2017-10-24 00:04:00 Rob

私はちょうど取ったオンラインコースを通じて、あなたが余白を計算する方法であることを理解している要素ではなく、要素自体のサイズでパディング％を計算することを理解しました。コースは間違っているはずです... –

これは応答性の高いコードを書く正しい方法ではありませんが、パディングの％はdivサイズではなく画面サイズから決定されることを理解できるようにしています。また、4.398736％を使用しているマージンは、両方のdivの左右の両方に追加しています。 .sectionの両側に5％のパディングと.asideの両側に8.33333％のパディングがあります。総サイズは115.96555％になります。

両方のdiv（セクションと脇）を並べて並べ替えたい場合は、ご理解ください。両方のために以下のように書かれたCSSスタイルを使用してください。このことができます

.section { 
height: 500px; 
width: 44.067133%; 
background-color: green; 
float: left; 
margin: 02.199736%; 
padding: 5%; 
display: inline-block; 
} 

.aside { 
height: 300px; 
width: 26.434279%; 
background-color: blue; 
float: right; 
margin: 02.199736%; 
padding: 5%; 
color: lightblue; 
display: inline-block; 
}

希望... ** **ここにあなたのマークアップを投稿すると、あなたはgithubのを使用した場合、それはこの質問を閉じなるだろう必要であることを

出典

2017-10-24 00:21:58

ありがとうございます。パディングはコンテナのサイズで計算され、画面やdivサイズでは計算されないようです。私が明示的に述べてきたオンラインコースでは、エレメントのサイズによってパディング％を計算することは完全に間違っているようです。ディスプレイを追加する理由は何ですか：インラインブロックですか？ –

はい、私の間違いです。私はコンテナも持っていることを忘れていました。私はあなたがdivを直接体の下に置いていると思った。 –

CSS：ブラウザが正しくパディング％を計算していない

答えて

関連する問題