paddingとmargin

楽しい生活

内側の余白と外側の余白の作りかた

f:id:t0919k-1201y:20201110113614p:plain

 

paddingとmargin

f:id:t0919k-1201y:20201110113730p:plain

これまで余白を作るにはpadding

paddingはborderの内側の余白を作る

f:id:t0919k-1201y:20201110113742p:plain

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

なお値の指定方法は、paddingと同様

f:id:t0919k-1201y:20201110113754p:plain

 

ボックスモデル

f:id:t0919k-1201y:20201110114247p:plain

内側:padding

外側:border

 

marginをまとめて書く

f:id:t0919k-1201y:20201110114439p:plain

f:id:t0919k-1201y:20201110114451p:plain

f:id:t0919k-1201y:20201110114503p:plain

 

演習メモ

・contents-itemの中のp要素のfont-size、margin-topを指定

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

コメント

タイトルとURLをコピーしました