プログラミング

【プログラミング独学】HTML&CSS 21日目、余白

プログラミング学習(HTML&CSS)をProgateで学習した内容を記録したものです

 

Progateでの学習と自分でリサーチしてわかったことをメモしています

 

今回はProgate演習21をやりました

 

 

内側の余白と外側の余白

余白を作るときはpaddingを使ってきたがpaddingはborderの内側に余白を作るもの

  

borderの外側に余白を作りたい場合はmarginを使う

 

記入例

css

.logo1 {

border: 3px solid #ff0000;

padding: 10px;

margin: 20px;

}

borderの内側の余白を10px、外側の余白を20pxに指定

 

ボックスモデル

border,padding,ボックスモデルという概念に基づいている

HTMLのすべての要素にはborderがある(初期状態では表示されない)

 

Progate(https://prog-8.com/slides?displayed_id=2525&lesson=61)より引用

 

paddingは内側

marginは外側

 

marginもまとめて書ける

paddngと同様にmarginもまとめて書ける

 

css

.logo1 {

margin: 20px 10px;

}

ロゴ1のmarginを上下20px、左右10pxに指定

 

  

まとめ

paddingやmarginがまだよくわかっていないけど慣れだろうな(´・ω・`)

 

とにかく初級編はあと1レッスンだから頑張ろう

 

おわり

ブログランキングに参加中です。

応援よろしくお願いします。

ブログランキング・にほんブログ村へにほんブログ村

人気ブログランキング

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA