バックエンド プログラマーがフロントエンド (CSS) について語る レッスン 6: Box Model_html/css_WEB-ITnose

要素ボックスの最も内側の部分が実際のコンテンツであり、コンテンツを直接囲んでいるのがパディングです。パディングは要素の背景を表します。パディングの端が境界線です。境界線の外側にはマージンがあり、デフォルトでは透明であるため、その背後にある要素が隠れることはありません。

ヒント: 背景は、コンテンツ、パディング、境界線で構成される領域に適用する必要があります。

1. CSS パディング プロパティ

property	description
padding	省略形プロパティ。この機能は、ステートメント内の要素のパディング属性を設定することです。
padding-bottom	要素の下部パディングを設定します。
padding-left	要素の左パディングを設定します。
padding-right	要素の右パディングを設定します。
padding-top	要素の上部のパディングを設定します。

属性値:

auto: ブラウザーがパディングを計算します。

length: パディング値をピクセル、センチメートルなどの特定の単位で指定します。デフォルト値は 0px です。

%: パディングを親要素の幅のパーセンテージとして指定します。

inherit: パディングを親要素から継承することを指定します。

2. CSS border プロパティ

1. border

1 つのステートメントで 4 つの辺のプロパティを設定するために使用されます。 border-bottom 下の境界線のすべての属性を 1 つのステートメントに設定するために使用される省略属性。 border-left 左ボーダーのすべての属性を 1 つのステートメントに設定するために使用される短縮属性。 border-right 右側の境界線のすべての属性を 1 つのステートメントに設定するために使用される短縮属性。 border-top 上の境界線のすべての属性を 1 つのステートメントに設定するために使用される短縮属性。

property	説明
border

2, border-style

propertydescriptionborder-style は、要素のすべての境界線のスタイルを設定するか、各辺の境界線スタイルを個別に設定するために使用されます。 border-bottom-style 要素の下枠のスタイルを設定します。 border-left-style 要素の左境界線のスタイルを設定します。 border-right-style 要素の右枠のスタイルを設定します。 border-top-style 要素の上端の境界線のスタイルを設定します。 属性値:

none: 境界線を定義しません。

hidden: 「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。

点線: 点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。

dashed: 破線を定義します。ほとんどのブラウザでは実線として表示されます。

solid: 実線を定義します。

double: 二重線を定義します。二重線の幅は、border-width の値と同じです。

groove: 3D グルーブの境界線を定義します。効果はborder-colorの値によって異なります。

ridge: 3D リッジ境界を定義します。効果はborder-colorの値によって異なります。

inset: 3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。

outset: 3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。

inherit: 境界線のスタイルを親要素から継承することを指定します。

3. border-width

AttributeDescriptionborder-width要素のすべての境界線の幅を設定するか、各境界線の幅を個別に設定するために使用される短縮属性。 border-bottom-width 要素の下枠の幅を設定します。 border-left-width 要素の左境界線の幅を設定します。 border-right-width 要素の右枠の幅を設定します。 border-top-width 要素の上枠の幅を設定します。

属性値:

thin: 細い境界線を定義します。

medium: デフォルト。中程度の境界線を定義します。

thick: 太い境界線を定義します。

length: 境界線の幅をカスタマイズできます。

inherit "は、境界線の幅が親要素から継承されることを指定します。

4. border-color

color_name: 色の名前の境界線の色の値を指定します (赤など)。

property	description
border-color	表示される要素の色を設定する短縮属性要素のすべての境界線の一部、または 4 つの側面のそれぞれの色を設定します
border-bottom-color
border-left-color	要素の左枠の色を設定します。
border-top-color	要素の上枠の色を設定します。
hex_number: 色の値を 16 進数で指定する境界線の色 (#ff0000 など)。色の値を rgb コードとして指定する境界線の色 (rgb(255,0,0) など))。	transparent: 境界線の色が透明であることを指定します。

説明

margin

1 つの宣言ですべての margin プロパティを設定します。

マール - right

要素の右マージンを設定します。 auto: ブラウザがマージンを計算します。 %: 親要素の幅のパーセンテージとして余白を指定します。 4. マージンの結合:

	margin-top
length: マージンの値を指定します。ピクセル、センチメートルなどの単位。デフォルト値は 0px です。
	継承: マージンを親要素から継承することを指定します。
マージンの結合とは、2 つの垂直マージンが結合すると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。