余白を設定するプロパティ
HTMLを装飾するうえで欠かせないものが余白の設定です。
ここでは要素の外側に余白を付ける「margin」と
要素の内側に余白を付ける「padding」を紹介します。
margin
marginは要素の外側に余白を付けるためのプロパティです。
余白を付ける方向をプロパティ名に、付けたい余白の大きさをプロパティ値で設定していきます
値は実際につけた一余白の大きさを単位付きで設定してあげればOK
自動算出してくれる「auto」やマイナスの値を設定することもできる
|
1 2 3 4 5 6 |
セレクタ{ margin-top:10px;/*上方向に余白*/ margin-right:15px;/*右方向に余白*/ margin-bottom:20px;/*下方向に余白*/ margin-left:25px;/*左方向に余白*/ } |
marginの注意点
marginを使う上で注意しないといけないものにmarginの相殺があります。
相殺はmargin同士が重なった場合に起こります。
相殺が起こった場合は大きいほうが優先され小さいほうのmarginがなかったことにされますので注意しましょう。
参考サイト
padding
paddingは要素の内側に対して余白の設定を行うプロパティです。
使い方はmarginとほぼ同じですが設定できる値に使えないものがあるので注意しましょう。
paddingの注意点
幅や高さを設定した要素に対してpaddingを設定すると、要素に設定した幅や高さの値が無視されてしまいます。
これはpaddingが設定した幅や高さの内側から要素押し広げる形でくっついていく仕様によるものなので注意をしてください。
これを回避するには「box-sizing:border-box;」を使って設定した要素内に余白を含める設定にしましょう。
paddingのプロパティ値について
marginとは違いプロパティ値には
- auto
- マイナスの値
この二つは使用できないので注意してください
ショートハンドプロパティ
一つ一つ方向を設定していくのはめんどくさいですよね。
なのであらかじめ一つのプロパティ名で4辺の値が設定できるようになっています。
さらに値の書き方によっては複雑な設定もできますので覚えておきましょう
|
1 2 3 4 5 6 |
セレクタ{ margin:10px 15px 20px 25px;/*値の左から上辺 右辺 下辺 左辺の順に余白の設定*/ padding:10px 15px 20px;/*値の左から上辺 右辺と左辺 下辺 の順に余白の設定*/ margin:0 auto;/*値の左から上辺と下辺 右辺と左辺の順に余白を設定*/ padding:10px;/*四辺すべてに余白の設定*/ } |
上のコードのようにmarginやpaddingにまとめて設定できますので覚えておきましょう
