ホームページ >ウェブフロントエンド >htmlチュートリアル >「CSS の秘密」-第 7 章- パート 1 (マージン、パディング)_html/css_WEB-ITnose
「CSS の秘密」-第 7 章- パート 1 (マージン、パディング)_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:00:151131ブラウズ
- パディングは境界線の間のスペースを指します
- 境界線はボックスの周囲の直線を指します
- 背景色は、ボックス内のスペースを埋めるために使用されますborder
- マージンは、あるラベルと別のラベルの間のスペースを指します。
デフォルトはこのようになっていますが、同じタグでもブラウザによってパディングとマージンが異なるため、すべてのパディングとマージンを変更するのが最善ですタグ マージンをゼロに設定します。
マージンとパディングを使用してスペースを制御します。
パディングは、コンテンツと境界線の間にスペースを追加します。パディングによって占有されるスペースは、空白のコンテンツにすることもできます。ただし、背景色や画像は塗りつぶされ、マージンによって要素間に空白スペースが追加されるため、マージンを追加すると空白の溝が増える場合があります。
マージンはパーセンテージを使用して配置できます。たとえば、
< !DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title></title> <style> .test1{ margin-left: 20%; margin-right: 20%; width: 500px; height: 500px; border: solid; } </style></head><body><div class="test1"></div></body></html> この div は html の本文内の div であると仮定します。この場合、この div は常に % の距離を維持します。ブラウザの左側から 20 の間隔、ブラウザの右側から %20 の間隔。このアプローチは、ブラウザのサイズに合わせていくつかの操作を行う場合に非常に適しています。
マージンとパディングにはショートカット属性を使用できます。
たとえば、
margin: 0 10px 20px 30px;
この設定のパラメータは、左から右、上、右、下と左マージン。
4方向の値を設定するにはショートカットが非常に便利です。
マージンの競合
要素の margin-bottom が別の要素の margin-top に接触する場合、ブラウザはそれらを加算せず、大きい方を適用します。これは非常に奇妙になるため、padding-top または padding-bottom を使用する必要があります。
負のマージン値
マージンの正の値は要素間のスペースを増やし、負の値は要素間のスペースを削除します。したがって、margin に負の値を設定すると、要素を目的の位置に簡単に移動できます。
無断転載禁止：神のような少年 » 「CSS の秘密」 - 第 7 章 - パート 1 (マージン、パディング)