margin,paddingの性質

CSS 授業

基本設定

margin , padding を使用しないときのデフォルト表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今日の天気</title>
<style>


body {
  background-color: #ccc;
}

h1 {
  color: #fff;
  background-color: #00bec4;
  width: 500px;
}


</style>
</head>
<body>
<h1>1月27日快晴</h1>
<p>ここしばらくは、天気がよくても寒く感じます。</p>
</body>
</html>
  • ブラウザでの表示


paddingの使用

<style>

body {
  background-color: #ccc;
}

h1 {
  color: #fff;
  background-color: #00bec4;
  width: 500px;
  padding: 10px 1em 10px 1em;
}

</style>
  • ブラウザでの表示



ベースラインの変更

h1 {
  color: #fff;
  background-color: #00bec4;
  width: 500px;
  padding: 10px 1em 7px 1em;
}
  • ブラウザでの表示


resetcss（指定した設定を０にする）

<style>
/* resetcss */

* {
  margin: 0;
  padding: 0;
}
  • ブラウザでの表示


margin,paddingでの指定

h1 {
  color: #fff;
  background-color: #00bec4;
  width: 500px;
  margin: 50px 0 20px 50px;
  padding: 10px 1em 7px 1em;
}


ブラウザでの表示


bodyでの指定

body {

  margin: ;     /* [ margin ]は body 内では基本使わない */  

  padding: 30px;
  background-color: #ccc;
}
  • ブラウザでの表示