2011-06-29 14 views
2

私はGoogleを検索しましたが、何も見つかりませんでした。私はこのサイトを検索し、似たようで、このトピックUnwanted space between divsを見つけた、と私は2つのdivの間の不要なスペースを取り除く

margin:0px; 

いくつかの場所を適用しようとしましたが、そこに私はまだ、2つのdivタグの間のスペース。

相続人は私のhtmlスペースがなぜ起こるか私はどのように私は、この不要なスペースを解決することができ、見つけることができます

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>title/title> 
<link rel="stylesheet" type="text/css" href="e.css"> 
</head> 


<body> 

<div id="page"> 

    <div id="content"> 
     <div id="up"> 
      <div id="tab"> 
        <ul id="tabmenu"> 
       <li id="anm" class="tbs blue"><a href="#"><span>Anm</span></a></li> 
       <li id="kom" class="tbs blue"><a href="#"><span>Kom</span></a></li> 

       <li id="omt" class="tbs blue"><a href="#"><span>Omt</span></a></li> 
       <li id="sts" class="tbs blue"><a href="#"><span>Sts</span></a></li> 
       </ul> 
     </div> 

     <div id="usrp"> 
      <div id="usr"> 
      </div> 
     </div> 
    </div> 

    </div> 

    <div id="bottom"> 

    </div> 
</div> 
</body> 
</html> 

そして、私のCss

html { 
    height: 98%; 
} 

body { 
    height:99%; 
} 

#page { 
    height:99%; 
} 

#content { 
    /*border:2px solid blue;*/ 

} 

#bottom { 
    border:2px solid green; 
    height:15%; 
    vertical-align: bottom; 
} 

#up { 
     /*border:dotted green 2px;*/ 
     width:59%; 
} 

.usrcom { 
    border-bottom: 2px dotted blue; 
    margin-left:15px; 
    margin-right:15px; 
} 

#usrp { 
    width:100%; 
    clear:both; 
    border-right: 2px solid blue; 
    border-left: 2px solid blue; 

    border-bottom:2px solid blue; 
    border:dotted yellow 2px; 


} 

/***Tabs menu*****/ 
#tabmenu { 
    float:left; 
    width:685px; 
    /*background:#BBD9EE;*/ 
    /*background:#FF6633;*/ 
    font-size:93%; 
    line-height:normal; 
    margin-top: 0px; 
    margin-left: 0px; 

    /*border:dotted red 2px;*/ 
    border-bottom:2px solid blue; 
    /*border:dotted red 2px;*/ 


} 

#tabmenu ul { 
    /*background:#BBD9EE;*/ 
    padding:0px 0px 0 0px; 
    margin:0px; 
    list-style:none; 
    border:dotted green 2px; 
} 

#tabmenu li { 
    display:inline; 
    padding:0; 
    margin:0px; 
} 

#tabmenu a { 
    float:left; 
    /*background:url("img/tableft2.png") no-repeat left top;*/ 
    margin:0; 
    padding:0 0 0 4px; 
    text-decoration:none; 
} 

#tabmenu a:hover span { 
background-color:#3399FF; 
margin:0px; 
border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
} 

#tabmenu a span { 
    float:left; 
    display:block; 
    /*background:url("img/tabright2.png") no-repeat right top;*/ 
    padding:5px 15px 4px 5.5px; 
    margin:0px; 
    color:#FFFFFF; 
    background-color:#0000FF; 

    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
} 

編集:

は私のCSSに適用しようとしました:

UPS、yearh、

、divをどの伝えるのを忘れてそれはTabmenu 'と 'USRP'

編集の間にあります

#tab { 
    margin: 0px; 
    padding:0px; 

}

本当に 'タブ'と 'usrp'の間にありますが、それは助けになりません。

+1

http://jsfiddle.net/blineberry/AhHvu/のdivあなたが話しているトリックを行う必要がありますか? – Brent

+0

どちらのdivですか?あなたはそれらのいくつかを持っています。 – kei

+0

これは、 'Tabmenu'と 'usrp'の間にあり、div32の間にdiv32を指定するように更新されました。 – Thomaxz

答えて

2

#tabmenu { 
    margin:0; 
} 

+0

です。ありがとうございました。 – Thomaxz

1

インスペクタの使用方法と「この要素の検査」を学びます。次に、ページのすべての要素にカーソルを合わせると、マージン/パディングが文字通りに表示されます。オンザフライでCSSを編集して、修正を適用する前にテストすることもできます。 Firefox用のFirebugアドオンが私の好みですが、Chrome、Safari、さらにはInternet Explorerでさえそれらはすべて組み込まれています。 CSSで

関連する問題