CSSスキル - 第4章 Lesson4

外側の余白を調整するmarginプロパティの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

外側の余白を調整するmarginプロパティについて、初心者向けに解説しています。



この動画で学べること

・margin(外側の余白)を指定する方法



margin(外側の余白)を指定する方法

marginを文章に50pxと指定した場合、文章の上下左右に50pxの余白が入ります。
marginのは、「margin:上 下 左 右;」という順番で書くというルールがあり、それぞれをpxで指定できます。
では、<div>タグのid名「design」に実際にmarginを書いていきましょう。



div#design {
width: 500px;
height: auto;
background-color: #ccc;
margin: 30px 0 30px 30px;
}



一度保存してブラウザで見てみましょう。
上、下、左に30pxの余白ができました。
では次は、上下左右に一箇所にmarginをかける方法を見ていきましょう。
marginと書いたあとに、「-(ハイフン)top(上の場合)」と書きます。
実際にやってみましょう。



div#event {
width: auto;
height: auto;
background-color: #ddd;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
}



保存してブラウザで見てみましょう。
上、右、左にそれぞれ指定したmarginの余白ができました。