CSSボックスモデル

CSSボックスモデル

• CSSボックスモデルの概要
• CSSパディング
• CSS境界線
• CSSマージン
• CSSマージンのマージ

1.CSSボックスモデル

要素ボックスが要素のコンテンツ、パディング、境界線、余白をどのように処理するかを指定します。

下の写真に示すように:

2番目、CSSパディングプロパティ

CSS のパディング プロパティは、要素の境界線とそのコンテンツの間の空白を定義します。パディング属性 は長さまたはパーセント値を受け入れますが、負の値 は許可されません。

4 つの方向 (上、右、下、左) にパディングを直接設定できます:

リーリー

次の 4 つの個別の属性を使用して、上、右、下、左のパディングをそれぞれ設定することもできます。

パディングトップ
右パディング
パディングボトム
左詰め

パディングのパーセント値

前述したように、要素のパディングのパーセンテージ値を設定できます。パーセンテージ値は、マージンと同様に、親要素の幅を基準にして計算されます。したがって、親要素の幅が変更されると、親要素も変更されます。

次のルールは、段落のパディングを

親要素の幅の10%に設定します:

リーリー

例: 段落の親要素が div 要素の場合、そのパディングは div の幅に基づいて計算されます。

リーリー

注: 上部と下部のパディングは、左右のパディングと一致します。つまり、上部と下部のパディングのパーセンテージは、高さではなく、親要素の幅を基準にして設定されます。

デフォルト値: 0継承: いいえバージョン: CSS1JavaScript 構文: .style.padding="10px 5px"

オブジェクト

可能な値

値説明自動ブラウザはパディングを計算します。 長さ%継承パディングを親要素から継承することを指定します。

 

 

三，CSS 边框属性

CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-width)和颜色(border-color)。（如果有可见背景的话，元素的背景会延伸到边框区域，因为元素的背景是内容、内边距和边框区的背景）

既可以直接定义边框的样式、宽度、颜色，也可以定义单边样式、宽度、颜色。如下图所示：

パディング値をピクセル、センチメートルなどの特定の単位で指定します。デフォルト値は 0px です。
親要素の幅のパーセンテージとしてパディングを指定します。

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

 

 

四，CSS margin属性

围绕在元素边框的空白区域是外边距（默认是空白的。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

可以直接设置四个方向（上，右，下，左）的外边距：

<span>h1 {margin: 10px;}  
  
或者<br>
h1 {margin: 10px 0.25em 2ex 20%;}</span>

也可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

• margin-top
• margin-right
• margin-bottom
• margin-left

 

默认值：	0
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

以下で紹介します: マージンマージ

マージンの結合とは、 2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。 結合されたマージンの高さは、結合された 2 つのマージンの高さのうち大きい方と等しくなります。 (追伸: 通常のドキュメント フロー内のブロック ボックスの垂直方向のマージンのみがマージされ、インライン ボックス、フローティング ボックス、または絶対配置ボックス間のマージンはマージされません。)

要素が別の要素の上に表示される場合、最初の要素の下マージンと 2 番目の要素の上マージンがマージされます。下の写真を見てください:

要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上マージンおよび/または下マージンもマージされます。下の写真を見てください:

奇妙に思えるかもしれませんが、マージンはマージン自体と融合することさえあります。

空の要素があり、マージンはあるものの、境界線やパディングはないとします。この場合、上のマージンと下のマージンがぶつかり、マージされます:

このマージンが別の要素のマージンと一致する場合、それもマージされます:

一連の段落要素が占めるスペースが非常に少ないのは、すべての余白がマージされて小さな余白が形成されるためです。