マージンとパディングの動作

マージンから奇妙な動作が発生しています。垂直のスクロールバーは、私が底の近くにいなくても表示されます。これをテストし、Chrome、IE11、Firefoxの最新バージョンで同じ結果が得られたことを考慮して、これが望ましい動作であると仮定します。マージンとパディングの動作

bodyのマージンなしでpadding0.1pxに結果を変更するスクロールバー

<html> 
<head> 
<style> 
body { 
    margin: 0; 
    height: 100%; 
    padding: 1px; 
} 

div { 
    margin: 15px; 
}  
</style> 
</head> 
<body> 
<div>Hmm</div> 
</body> 
</html>

で次のコードの結果。 bodyのpaddingを0pxに変更すると、余白が生じます。 paddingがゼロでない限り、をbodyに追加すると、スクロールバーが削除されます。

フィヨルドを追加できませんでした。フィヨルドを複製できないためです。これを簡単なhtmlファイルでテストする必要があります。

これは実際には予想される動作ですか？なぜ彼らはそれをこのように実装したのかという論理的な説明はありますか？

出典

2016-04-10 r.h

スクロールバーが表示される理由は、heightを定義し、paddingの値を設定する組み合わせのようです。 heightプロパティは、その値に追加されたマージンとパディングを除いて、要素のコンテンツの高さを指定します。要素の高さの内容をページの100％に設定し、さらに要素の高さ全体がオーバーフローするようにしたため、スパッドが追加された後にスクロールバーが表示されます。

さらに、要素にbox-sizingを適用すると、とのプロパティはpaddingの値になります。面白いのは、marginが含まれていないことです。したがって、適用する場合：

body { 
    box-sizing: border-box, 
    margin: 1px, 
    padding: 0 
}

あなたはまだスクロールバーが表示されます。要素のheightプロパティは、デフォルトでは要素内のコンテンツの高さのみを指示することを理解した後、少し意味をなさない。このことができます:)

出典

2016-04-10 19:19:23

を100％に体の高さを設定する

希望は、それはそれの高さのすべてがhtml要素である親要素のとります。 html要素の幅と高さは、それが入っているウインドウによって制御されます。マージンまたはボーダーを追加すると、利用可能なスペースを超えて次元が増加し、スクロールが誘導されます。しかし、もう1つの問題は、divにマージンを追加すると本体が15pxだけ押し下げられることです。これは、マージンを崩壊させることと関係があります。詳細については、https://stackoverflow.com/a/2680515/6184852をご覧ください。

出典

2016-04-10 19:24:22

マージンとパディングの動作

答えて

関連する問題