padding margin borderとは？設定の仕方を分かり易く

2019-07-29 2019-10-11

トム

padding margin borderとは？設定の仕方を分かり易く！

paddingとは、marginとは余白のこと

余白はどこに存在するのか

文字を書いたり画像を取り込んだりする領域のことをブロックと呼びます、下の画像の青い部分の所がブロックを表しています。

青いブロックの領域の上下左右の緑の領域を「padding(パディング)」と言います
ブロックの一番外側の濃いオレンジの上下左右の領域を「margin(マージン)」と言います。

このパディングとマージンは余白なのでブラウザには表示はされません。

パディングとマージンの調べ方

デベロッパーツールを使う

ＨＴＭＬやＣＳＳを記述する上ではこのデベロッパーツールを覚えておいた方がいいです。

場所は画面右上の点が上下に3つ並んだところをクリックして「その他のツール」を選択し「デベロッパーツール」をクリックします。

ショートカットキー「Shift」＋「Ctrl」＋「I」もあります、もしくは記事の画面上で右クリックして「検証」をクリックしても出てきます。

左が記事の画面で右側にデベロッパーツールが出てきます、デベロッパーツールの上側がHTML、下側がCSSをブラウザが解釈したところです。

上は「Elements」下は「Styles」に合わせれば確認することができます。

探したい所をクリックしたらボックスについての情報が出てきます。

パディングとマージンの設定の仕方

パディングとマージンも設定方法は一緒で上下左右にピクセル数を設定していきます。

上は(top)下は(bottom)左は(left)右は(right)で表し
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
このように表します。

記述を省略する

また表記の要領も数字が同じであれば省略して表すことができます。

例えば「margin: 10px;」この場合は上下左右とも「10px」を表します。

このように数値が一つの場合は「上下左右」
数値が二つの場合は「上下」「左右」を表します。
数値が三つの場合は「上」「左右」「下」を
数値が四つの場合は「上」「右」「下」「左」時計回りになるので注意しておきましょう。

他のブロックとの間隔を考慮して数値を設定しましょう。

borderとは？　

パディングとマージンの間に「border(ボーダー)」という領域があります。

境界線を表すプロパティです

ボーダープロパティは、要素に外枠を表示するときに使用します。

ボーダーのスタイル・大きさ・色をまとめて指定できます。

同一の線の太さで表示させる場合

border-top: 10px;
border-bottom: 10px;
border-left: 10px;
border-right: 10px;
border style: solid;
border-color: red; これを説明すると線の太さは上下左右10ピクセルで、線は実線、色は赤になります、10ピクセルの幅の赤の線で囲まれるとなります。

上下左右が同じ数値ならまとめることができるので省略して書くと

border: 10px solid red; と記述することができます。