MENU

【スキルハックス】CSSの余白について学ぶ!

今回はCSSの余白について学んでいきます。余白はコンテンツとコンテンツの間の事です。

まず、前回からHTMLでpタグの2行だけにします。

CSSでborderはコンテンツに境界線を引くためのものです。solidは一本戦を表しています。

プレビューで見ると、上記のような境界線が赤で表されています。

10行目のpタグを区別するためにidを付けます。

idをつけたpタグにpaddingを100pxとします。

上も下も左も100pxの余白が出来ました。

次にmarginを50pxにします。

marginは境界線の外側に上、下、右、左と50pxずつ余白ができました。

次にmarginはそのままで、padding-topを100pxにします。

すると境界線の内側の上だけ100pxの余白ができます。

padding-leftを100pxにしてみます。

境界線の内側の左に100pxの余白ができます。

padding-bottomを100pxにしてみます。

境界線の内側の下に100pxの余白ができます。

paddingをコメントにして、margin-topを50pxにします。

境界線の外側に50pxの余白ができます。

margin-leftを50pxにします。

境界線の外側の左に50pxの余白ができます。

margin-rightを50pxにします。

境界線の外側の右に50pxの余白ができます。

次にpaddingを上記のようにします。

上記のようになります。

padding-top、padding-right、padding-bottom、padding-leftと書くのは面倒臭いので、上記のようにします。

同じ内容になります。順番は時計回りで、上→右→下→左で書いていきます。

marginも同様に、時計回りで表すことができます。

paddingは境界線の内側、marginは境界線の外側と覚えておきましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる