5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

paddingとmargin (CSS)

Posted at

未来電子テクノロジーでインターンをしている mrm1027 です。

【プログラミング初心者であるため、内容に誤りがあるかもしれません。
 もし誤りがある場合は、すぐさま修正しますのでどんどん指摘してください。】

はじめに

プログラミングを始めて、1ヶ月が経ちました。
とてつもなく早く感じます。
最近ではプログラミングの進みがあまり良くなく、まとまった時間を確保することに
苦労しているところです。

カリキュラムの進捗としては、ProgateのHTML&CSSの道場編中級編までようやく修了し、自由課題に入ろうとしているところです。

padding と margin の違い

CSSでpaddingとmarginが個人的に分かりづらかったので、この場を借りて復習させていただきます。

<CSSの余白の考え方>

要素の中身(内容)があり、そのまわりの余白がpaddingです。
そのまわりにはborder(線)があり、それより外側の余白がmarginです。
→ 「borderを基準に「中」と「外」で考えたらいいのか!!!」

スクリーンショット 2019-07-24 15.57.54.png [参考:https://saruwakakun.com/html-css/basic/margin-padding]

なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。
スクリーンショット 2019-07-24 15.57.32.png

[参考:https://saruwakakun.com/html-css/basic/margin-padding]

→ 「widthとheightを設定したら、paddingやmarginを含んだ要素の高さや広さを設定できると勘違いしてた!!!」

まとめ

paddingとmarginの違いが体系的に理解できるようになりました。
これからの知識の蓄積を忘れず、学習を進めていきます。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?