上下左右の余白を個別に指定する--人気ホームページが作れる簡単作成講座

トップページ　＞　初心者講座　＞　

上下左右の余白を個別に指定する

５－６　上下左右の余白を個別に指定する

「margin」「padding」は、数値を指定すると、指定したタグの内側や外側に余白を作りますが、上下左右にちがう幅の余白を指定したり、左だけ、上だけというように一部だけに余白を指定することもできます。

特に、リスト表示させる「ul」は*（アスタリスク）によって「margin」「padding」が0pxに指定されると極端に左寄りになるため、左側の余白を広くして位置を調節する必要があります。

「margin」「padding」を上下左右に個別指定する方法

ul { padding : 10px 5px 10px 30px }

左の図の番号順に余白の幅を指定することで個別に指定することができます。

上　top・・・・・10px
右　right・・・・5px
下　bottom・・10px
左　left・・・・・30px

上下左右の余白を個別に指定する

padding : 上右下左
margin : 上右下左

例
padding : 10px 0px 15px 5px
margin : 5px 5px 5px 20px

上下と左右の２つで指定する

padding : 上下　左右
margin : 上下　左右

例
padding : 0px 15px　　（上下に0px、左右に15pxの内側の余白を指定）
margin : 5px 20px　　（上下に5px、左右に20pxの外側の余白を指定）

ホームページソース

完成までもうすぐです。

XHTML

<div id="a-box">

<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト

</div>

<div id="b-box">

<h2>h2 ページタイトル</h2>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

</div>

<div id="c-box">

<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>

<div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>

</body>

</html>

CSS（スタイルシート）

* {
          padding : 0px ;
          margin : 0px ;
}

#site-box {
          width : 750px;
          border: 1px solid #FF9900;
}

#a-box {
          border-bottom: 1px solid #FF9900;
          background-image: url('img/header.gif');
          padding: 20px;
}

#b-box {
float: left;
width: 500px;
}

#c-box {
          float: right;
          width: 250px;
          font-size: 12px;
}

#d-box {
          clear: both;
          width: 750px;
          background-color: #FFFF99;
          font-size: 12px;
          padding: 10px;
}

h1 {
          font-size: 22px;
}

h2 {
          font-size: 17px;
          background-color: #FFFF99;
          padding: 10px;
          margin: 5px;
}

h3 {
          font-size: 15px;
          color:#FF9900;
          margin: 5px;
}

p {
          font-size: 14px;
          margin: 30px;
}

ul {
          padding : 10px 5px 10px 30px;
}

.category {
          font-size: 14px;
          color: #FFFFFF;
          background-color: #FF9900;
          padding: 5px;
          margin: 5px;
}

＜＜前のページ　　次のページ＞＞

このページをブックマークする→　