リストをナビゲーションに

リストを使ったナビゲーション

縦並びのボックス

paddingは問題なし
marginは相殺される

横並びのボックス

marginは通常計算（相殺されません）
paddingはブラウザにより影響
borderも計算に入れる

borderの数値を大きくしただけで、崩れます。
この解釈は、ブラウザごとに違います。（旧ブラウザとモダンブラウザの違い）

ということで、このような崩れをなくすためには「li a」が「margin: 0;」「padding: 0;」「border: none;」で設定する背景画像でボタンに見せるナビゲーションが主流になります。

「border」の数値が大きくなった値を、「li」の「width」から引いて表示すると

問題なく表示されることがわかります。
「float」を使ったレイアウトに、borderを設定した場合も同様のことがおきます。

以下のリストを、「縦並びボタン」と「横並びボタン」に設定してみましょう。
サイズ・色は自由。

<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>縦・横並びのナビゲーション</title>
<style type="text/css" media="screen, print">
<!--
/* リセット */
* {
	margin: 0;
	padding: 0;
}

/* 縦並びナビゲーション*/
#nav1 {
	font-size: 1em;
	font-weight: bold;
	height: auto;
	margin: 50px 0 0 50px; /* 上・左を少し空けて見やすく */
}
#nav1 ul {
	list-style-type: none; /* リストの黒丸を消す */
	width: 150px; /* リスト全体の幅 */
	border-top: 2px solid #FFF; /* 囲みの上枠 */
	border-right: 2px solid #FFF; /* 囲みの右枠 */
	border-left: 2px solid #FFF; /* 囲みの左枠 */
	background-color: #6FAB78; /* 囲みの背景色 */
}
#nav1 li a {
	width: auto; /* リンクの幅（省略可） */
	height: auto; /* リンクの高さ（省略可） */
	padding: 6px; /* 文字から枠までの空き */
	display: block; /* リンクの面 */
	border-bottom: 2px solid #FFF; /* 囲みの下枠 */
}
#nav1 a:link, #nav1 a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#nav1 a:hover {
  color: #FFFFFF;
  background-color: #447769;
}

/* 横並びナビゲーション */
#nav2 {
	height: auto;
	width: auto;
	margin: 50px 0 0 50px; /* 上・左を少し空けて見やすく */
}
#nav2 ul {
	list-style-type: none;
	width: 750px;
	height: auto;
	border-top: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	overflow: auto;
}
#nav2 li {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	width: 148px;
	height: auto;
	float: left;
	display: inline;
	background-color: #6FAB78;
	border-right: 2px solid #FFF;
}
#nav2 li a {
	padding: 7px 0;
	display: block;
}
#nav2 a:link, #nav2 a:visited {
	color: #FFFFFF;
	text-decoration: none;	
}
#nav2 a:hover {
	color: #FFFFFF;
	background-color: #447769;
}
-->
</style>
</head>
<body>
<div id="nav1">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
<div id="nav2">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>

ボックス内にボックスがある場合のマージンの相殺

要素間の上下マージンの相殺

どちらも正の値の場合、大きいほう
どちらも負の値の場合、小さいほう
一方が正の値、他方が負の値の場合、足し引きした値を設定

ボックス内にボックスがある場合のマージンの相殺

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clearプロパティ</title>
<style>
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #D2E5E5;
}
#container {
	width: 800px;
	height: auto;
	margin: 0 auto;
	padding: 10px 0;
	background-color: #FFFFFF;
}
#header {
	width: 780px;
	height: 90px;
	margin: 0 10px 30px 10px;
	background-color: #E6DCF0;
}
#wrapper {
	width: 800px;
	height: auto;
	margin: 10px 0 10px 0;
	overflow: hidden;
}
#content {
	width: 585px;
	height: 350px;
	margin: 0 10px 0 0;
	background-color: #F0E7DB;
	float: right;
	display: inline;
}
#sidebar {
	width: 185px;
	height: 350px;
	margin: 0 0 0 10px;
	background-color: #DDF0D5;
	float: left;
	display: inline;
}
#footer {
	width: 780px;
	height: 90px;
	margin: 0 10px 0 10px;
	background-color: #F0F763;
	clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

ボックス内のボックスがある場合も相殺されマージン値の大きいボックスのマージンが採用されます。
つまり、「#container」の「margin: 0;」なので、「#header」の「margin: 10px;」が採用されて、「#header」の上に「#container」までの「余白」ができずに、そのままbodyに対しての空きを作ってしまいます。

この相殺は、外側のボックスにpadding又はborderが設定されておらず、2つのボックスの間に他の要素が存在しない場合にのみ発生します。
※「div要素」は、グループのために利用されますが、「dl」や「ul」などのリストは、中に他要素が入ることが前提です。

もちろん「li」自体も要素間の上下マージンの相殺は発生します。

このことに注意して設定してみましょう。