0

如下图所示，它们是两个红色区域之间的小间隙。

我已将所有边距和填充设置为零，但它仍然在两者之间给出 4px（我认为）边距。我想知道为什么会出现在那里...
两个红色区域浮动到左侧并显示为内联-堵塞。

<!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

3

您的 div 包含在内联格式化上下文中，并且 html 文档中的新行生成一个空格

 <div id="_left">
    this is left region of the page..
</div>
<div id="_content">
    this is content region of the page
</div>

您可以通过将这些 div 的结束标签和结束标签放在一起来避免这种情况

<div id="_left">
    this is left region of the page..
</div><div id="_content">
    this is content region of the page
</div>
于 2013-05-18T13:47:30.070 回答
0

一个好主意是使用 google chrome 或 firefox 来检查您想要了解更多的元素。只需右键单击您的红色块，检查元素。然后，这将向您显示适用于元素的 css，包括从其他元素继承的任何内容。您可以通过在检查器中编辑 css 代码或编辑也由检查器提供的样式表来实时测试替代方案。

好的，试试

#_content {
 float:left
}

这是小提琴：http: //jsfiddle.net/cfgXX/

于 2013-05-18T13:14:25.500 回答