ga-05-m2

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
レイアウトに欠かせない
外側余白(margin)と 内側余白(padding)

外側余白(margin)と内側余白(padding)は画面を見やすくするために重要な役割を持っています。しかし、ホームページを作成していく中で、何回も悩むのが余白が思った通り取れないという問題です。

A.外側余白(margin)を理解するための前提知識が必要です。それは、h1~h6タグ及び Pタグは、初期設定値として上下に1em(1文字分)の余白(margin)を持っているので上下余白を考えるとき考慮する必要があります。又、上下余白(margin)が重なるときは大きい方が選択されます。

【サンプル画像】

画像

     

B.外側余白(margin)と内側余白(padding)を設定したサンプルで説明します。下図の青字の矢印が外側余白(margin)で、赤字の矢印が内側余白(padding)です。下図では、枠線や背景色を付けているので分かり易いのですが、無くなると外側余白か内側余白かが分かり難くなります。又、日本語のブランクが悪戯して改行をしている場合があります。

【サンプル画像】

画像

          
【サンプル コード】
HTMLコード
<!DOCTYPE html>
<html>
<!--====================================
    外部余白と内部余白
=====================================-->
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" 
          href="style-1.css" 
          type="text/css">
</head>
<body>

<div class="box">
  
    <p class="content1">
      paddingの値を1つだけ(0px)指定した場合:<br>
      上下左右に0pxの内部余白<br>
      margin(18px 50px 18px 50px)=<br>
      (上、右、下、左)の外部余白
    </p>

    <p class="content2">
      paddingの値を2つ(18px 50px)指定した場合:<br>
      上下に最初の値18px、左右に次の値50pxの内部余白<br>
      margin(18px 50px 18px 50px)
    </p>

    <p class="content3">
      paddingの値を3つ(20px 20px 30px)指定した場合:<br>
      ひとつめの値20pxが上に、ふたつめの値20pxが左右に<br>
      最後の値30pxが下に内部余白<br>
      margin(18px 50px 18px 50px)
    </p>

    <p class="content4">
      paddingの値を4つ(70px 0px 0px 0px)指定した場合:<br>
      ひとつめの値が上に<br>
      ふたつめから時計回りに指定した値の内部余白<br>
      margin(36px 50px 18px 50px)
    </p>

</div>

</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      外部余白と内部余白
--====================================*/

p.content1 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 0px;
  margin:18px 50px 18px 50px;
}

p.content2 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 18px 50px;
  margin:18px 50px 18px 50px;
}
p.content3 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 20px 20px 30px;
  margin:18px 50px 18px 50px;
}
p.content4 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 50px 0px 0px 0px;
  margin:36px 50px 18px 50px;
}
.box {
     width: 500px;
     height: auto;
     margin: 30px auto;
     background-color: ivory;
     border: 2px solid darkblue;
        
 back
pagetop
 next

文字及びボックスの
センタリング

外側余白(margin)と
内側余白(padding)

inlineとblockと
inline-block

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken