HTMLのborderについてです

質問

このHTMLとCSSを見てください
HTML部分
<div id="frame">
<h2>Bookmark</h2>
<ul>
<li><a target="_blank" href="">ブログ</a></li>
<li><a target="_blank" href="">google</a></li>
</ul>
</div>

CSS部分
#frame {
border-style:solid;
border-width:1px;
border-color:black;
width: 200px;
padding:0 1px;
}

h2{
background-image: url("ex05_titlebg.png");
background-repeat: repeat*20;
border: #808080 2px solid;
padding: 0 7px 0
}

ul>li>a {
text-decoration: none;
}

これで表示したときに上下の線と内容の間に隙間があいてしまいますこの隙間を埋めるにはどうしたらいいでしょうか？
あとliのところが左側に寄ってくれてなくて左側の線と間があいてしまっているのでこちらの間も埋めたいです

調べてみましたが分からず周りに詳しい知り合いもいないので質問しました
もしこういう質問に特化した掲示板などがあるならそちらも合わせて教えていただきたいです

回答No.2

ORUKA1951 · ベストアンサー

＞これで表示したときに上下の線と内容の間に隙間があいてしまいます
　どの線のことか迷ったのですが、#frameとh2共にボーダーが指定してあるので、このボーダー間の隙間ですね。
　h1,h2,・・p,ul,ol,dlなどのブロック要素は、
「一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )」と書かれているように、すこし隙間を空けて(行の折り返しによる行間--line-height--)と区別するためにmarginがあります。
　この場合、h2要素のmarginのために、隙間が開くのでしょう。
★firefoxの開発者ツール( 開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ ) )に Firebug( https://addons.mozilla.jp/firefox/details/1843 )というアドオンがあります。コレを使うと、隙間がどちらに由来するか直ちに分かります。

#frame {
border:solid 1px black;
width: 200px;
padding:0;
}
#frame h2{
background-image: url("ex05_titlebg.png") no-repeat;
border: #808080 2px solid;
padding: 0 7px;
margin:0;
line-height:20px;/* 背景の高さが20pxなら */
}
#frame ul,#frame ul li{
margin:0;padding:0;
list-style:none;display:block;
text-align:center;
line-height:20px;
}
#frame ul li{width:20em;}
#frame ul li a{text-decoration: none;}

★ul,ol,liにも同様にmarginまたはpaddingやmarginで字下げや上下の間隔が取られています。ブラウザによってmarginだったりpaddingだったりします。marginやpaddingを0にして、line-heightで上下中央に、text-alignで左右中央に合わせると良いでしょう。

★id=frameではなく、文書構造を示すclass名をつけるほうが良いです。
例えば、<div class="nav">とか・・
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　細かいことのようですが、先で枠内ではなく横に並べようとか、デザインを根本的に変えたいとき不整合になりますし、将来、あるいは他人がHTMLを修正/メンテナンスする時に、そこに何が書かれているか分かりにくくなります。
　HTML5では、HTML4.01で<div class="nav">のように書かれていたものは<nav>になります。

お礼

助言ありがとうございますおかげでできましいた
h2要素などにmarginがあったからうまくいかなかったのですね

回答No.1

DrFell

隙間はmarginおよびpaddingで調整します。まずは、ボックスモデルで検索すれば、図解がいくらでもでてきます。
次に問題になるのは、それぞれのブラウザがもっている初期値です。それが、現在の隙間として現れています。

なので、それぞれ問題になる場所にmarginやpaddingを指定すればいいです。

つまり
h2{
background-image: url("ex05_titlebg.png");
background-repeat: repeat*20;
border: #808080 2px solid;
padding: 0 7px 0;
margin:0;/*●適宜値を調整●*/
}
#frame ul{/*●適宜値を調整●*/
padding-left:0;
margin:0;
}

#frame li{/*●適宜値を調整●*/
margin-left:1em;
}

お礼

ありがとうございました
図解なんてものがあったんですね