富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. CSS
  3. ブログ

CSS-padding,marginプロパティについて

 

CSSの基礎プロパティについてのご紹介です!

 

☆padding,marginプロパティ☆

padding,marginプロパティは、要素に対して外側や内側に間隔や余白をつけたいときに使用します。

似ているようで全然意味の違うこの2つのプロパティについて、こちらもわかりやすく図で説明していきます。

 

こんにちはとテキストが配置されているまわりに間隔をつけるとします。

padding,margin

borderを境に内側にあるピンクの部分がpadding、

borderを境に外側にあるグリーンの部分がmarginです。

CSS上ではこのように記述します→p{padding:10px;

margin:15px;}

 

また、padding,margin共に数値の指示はこのように上下別々の数値で間隔をあけることもできます↓↓

①{margin:10px;}              上下左右全て10px

②{margin:10px 20px;}          top,bottom→10px、left,right→20px

③{margin:10px 20px 15px;}       top→10px、left,right→20px、bottom→15px

④{margin:10px 20px 15px 7px}  top→10px、right→20px、bottom→15px、left→7px

 

要素の配置にもよく使用するpadding,marginはとても便利なので、どんどん活用してみて下さいね★

この記事を書いたスタッフ