CSS 詳細レビューのメモ -- パディング、境界線、マージン_html/css_WEB-ITnose

要素のpadding、border、marginのプロパティはドキュメント全体のレイアウトに影響を与えますが、さらに重要なことに、それらは特定の要素の外観に大きな影響を与える可能性があります。

高さと幅

これら 2 つのプロパティは、インラインの非置換要素には適用できません。その高さと幅は、作成者ではなくリンクのコンテンツによって決定されます。通常のフロー内の要素の高さが設定されていることはほとんどありません。

マージンとパディング

要素に背景がある場合、背景はパディングには拡張されますが、外側のマージンには拡張されないため、パディングとマージンの使用に影響します。要素に指定されたパディングとマージンは、要素の背景がいつ終了するかに影響します。

コンテンツ領域の両側に 10 ピクセルの空白スペースを追加します (マージン: 10 ピクセル)。HTML の hspace と vspace と同様に、画像の周囲に余分なスペースを設定します。マージンは次のパターンに従います:

マージン: 右上、左下。値は要素を中心に上から下に時計回りに回転します。必要な効果を得たい場合は、値を正しく順序付ける必要があります。いずれかの値がデフォルトの場合、次のルールに従います:

1) 左マージンの値が欠落している場合は、右マージンの値が使用されます。

2) 下マージンの値が欠落している場合は、上マージンの値が使用されます。

3) 右マージンの値が欠落している場合は、上マージンの値が使用されます。

つまり、margin に 3 つの値を指定すると、4 番目の値が 2 番目の値からコピーされます。 2 つの値が指定された場合、4 番目の値は 2 番目の値からコピーされ、3 番目の値は 1 番目の値からコピーされます。

単一マージン属性

、margin:auto auto auto 3em; の場合は、margin-top、margin-right、margin-bottom、margin-left を 1 つ使用して個別にマージンを設定できます。

「負のマージンとマージされたマージン」のルールについては前のセクションで説明しました。通常のフローでは、垂直方向に隣接するブロックレベル要素のマージンがマージされます。ただし、マージンがインラインの非置換要素に適用される場合、行の高さには影響しません。マージンは実際には透明であるため、インラインの非置換要素のマージンは要素の行の高さを変更しないため、この宣言には視覚的な効果はありません。

ただし、インラインの非置換要素の前の単語の終わりと、インライン要素の背景の境界線の間に余分なスペースがあることに注意してください。必要に応じて、この余分なスペースをインライン要素の両端に追加できます:

<p style="font-size:12px;line-height:14px;"> This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="margin:25px;background:silver">strongly emphasized</strong>and which is<br>larger than the surrounding text. </p>

その効果は次のとおりです:

インラインの非置換要素に負のマージンを適用すると、さらに面白くなります。要素の上下の余白や行の高さは影響を受けませんが、要素の左端と右端が他のコンテンツと重なる場合があります。

置換された要素は異なります。置換された要素に設定されたマージンは行の高さに影響し、上下のマージンの値に応じて行の高さが増減する可能性があります。インライン置換要素の左マージンと右マージンは、置換要素の左マージンと右マージンと同じ効果があります。

ボーダー

すべてのボーダーには、幅または厚さ、スタイルまたは外観、色という 3 つの側面があります。境界線のデフォルトのスタイルはなしであり、境界線は表示されない場合があります。デフォルトの境界線の色は要素自体の前景色です。境界線の色が宣言されていない場合は、要素のテキストの色と同じになります。

境界線のスタイル

境界線にスタイルがない場合、幅はありませんが、場合によっては、非表示の境界線を作成したい場合があります。これにより、境界線の色が透明になり、幅のある目に見えない境界線を作成するために使用されます。この透明な境界線はパディングとして機能するため、要素の背景が境界領域にまで広がります (背景が表示されていると仮定します)。

パーセンテージ値とパディング

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

上部と下部のパディングは、左右のパディングと一致していることに注意してください。つまり、上部と下部のパディングは、高さではなく、親要素の幅を基準にして計算されます。