0

下の画像に示すように、2 つの赤い領域の間にはわずかな隙間があります。

私はすべてのマージンとパディングをゼロに設定しましたが、その間にまだ4px（私は思う）のマージンを与えています.なぜそこに表示されているのか知りたいです...
2つの赤い領域が左にフローティングされ、インラインとして表示されます-ブロック。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>learning...</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="_body">
        <div id="_header">
            <img src="images/header_index.jpg"/>
            <br />
            <h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
        </div>
        <div id="_navigation">
            <ul>
                <li><a href="HtmlPage.html">Destinations</a></li>
                <li><a href="HtmlPage.html">Culture</a></li>
                <li><a href="HtmlPage.html">Adventure</a></li>
                <li><a href="HtmlPage.html">Hotels</a></li>
                <li><a href="HtmlPage.html">Wild Life</a></li>
                <li><a href="HtmlPage.html">History</a></li>
                <li><a href="HtmlPage.html">About</a></li>
            </ul>
        </div>
        <div id="_left">
            this is left region of the page..
        </div>
        <div id="_content">
            this is content region of the page
        </div>
        <p id="background-viewer">..</p>
    </div>
    <pre>this is something written inside pre<a></a></pre>
    <script src="JavaScript.js"></script>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#_left , #_content , #_navigation > ul {
    display:inline-block;
}
#_body {
    width:1200px;
    background:-webkit-linear-gradient(top,#0000CC,#3999FF);
    margin:0px auto;
    padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {

}
    #_header > img {
        width:1200px;
    }
    #_header > h3 {
        border-bottom:3px solid black;
        font-weight:normal;
        text-align:center;
        text-transform:capitalize;
        padding:10px;
    }

/*Here ends styling of header*/

/*here comes styling of navigatin bar*/
#_navigation {
    margin:20px 20px 10px 20px;

}
/*here remains 960px for navigation bar*/
    #_navigation > ul {
        list-style-type:none;
    }
    #_navigation ul > li {
        width:135px;
        display: inline-block;
        padding: 5px 15px 5px 0px;
        font-family: Verdana;
        font-size: 22px;
        vertical-align: middle;
        background:-webkit-linear-gradient(top,blue,aqua);
        border-bottom-right-radius:5px;
        border-top-left-radius:5px;
    }
        #_navigation ul > li:active {
            background:-webkit-linear-gradient(bottom,blue,aqua);
        }
    #_navigation a {
        text-decoration: none;
    }
        #_navigation a:visited {
            color:black;
        }
        #_navigation a:active {
            color:black;
        }
        #_navigation a:focus {
            color:black;
        }
/*here ends styling of _navigation*/

/*this part is for _left and _content*/
#_left {
    width:400px;
    padding:0px;
    background-color:red;
    min-height:100px;
}
#_content {
    width:795px;
    background-color:red;
    min-height:100px;
}
/*here ends all the styling of mid region*/

これが私のコードのすべてです..javascriptファイルには何もないので、ここには入れませんでした...

4

2 に答える 2

0

Google Chrome や firefox を使用して、さらに理解したい要素を調べることをお勧めします。赤いブロックを右クリックして、要素を調べます。これにより、他の要素から継承されたものを含む、要素に適用可能な css が表示されます。インスペクターで css コードを編集するか、インスペクターにも表示されるスタイル シートを編集することで、代替案を実際にテストできます。

わかりました、試してください

#_content {
 float:left
}

ここにフィドルがあります：http://jsfiddle.net/cfgXX/

于 2013-05-18T13:14:25.500 に答える