神秘添加的div边框答案

【问题标题】：Mysterious added div border神秘添加的div边框
【发布时间】：2014-11-28 17:20:50
【问题描述】：

我想要一个绿色背景的导航栏 100% 填充屏幕宽度，并且文本和徽标位于导航栏的中心。

这是我的html和css

*{
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    background-color: #e9eaed;    
    margin: 0;
    padding: 0;
    
}

nav {
    width: 100%;
    background-color: #93bf2e;  
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin: 0;
    padding: 0;
    
  
}

#navMain {
    width: 1096px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;   
    
}

#navLeft {
    width: 431px;
    margin: 0;
    padding: 15px 0 15px 40px;    
    display:inline-block;
    
}

#navRight {
    width: 431px;
    margin: 0;
    padding: 15px 40px 15px 0; 
    text-align: right;  
    display:inline-block;    
}



#navCenter {
    width:146px;
    margin: 0;
    padding: 0;     
    display:inline-block;
    vertical-align:middle;     
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../CSS/Homepage.css">
        <title>Home</title>    
    </head>
    <body>
        <nav>            
            <div id="navMain">
                <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div>
                <div id="navCenter"><img src="../GeneralImages/logo.png"></div>
                <div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div>                
            </div>
        </nav>             
    </body>
</html>

我使用Display:inline-block 将 3 个 DIV 保留在同一行中。中心 div 宽度为 146。中心 div 包含一个 146 像素宽度的图像。但问题是我将包含 3 个其他 DIV 的主 DIV 的宽度设置为 1096。如果我将左侧（左侧填充 40 像素）和右侧（右侧填充 40 像素）DIV 宽度设置为 435，则右侧 Div 被推到第二行。这很奇怪，因为数学是正确的（435 + 40 + 435 + 40 + 146）。但是如果我将左右 DIV 的宽度设置为 431，它们在同一行。这意味着 8 个像素以某种方式神秘地丢失了 div 边框。请您帮忙去掉那些边框。

【问题讨论】：

标签： html

【解决方案1】：

divs 之间出现这些空格的原因是代码中的元素之间有空格（例如换行符和制表符或空格）。从您的标记中删除它们，divs 将正确排列：

<div id="navMain">
  <div id="navLeft">Home    My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"></div><div id="navRight">Create Story    Log Out</div>
</div>

或者你可以使用 HTML cmets：

<div id="navMain">
  <div id="navLeft">Home    My Page</div><!--
  --><div id="navCenter">
    <img src="../GeneralImages/logo.png">
  </div><!--
  --><div id="navRight">Create Story    Log Out</div>
</div>

看起来很丑，但确实有用。希望这会有所帮助，因为您知道您的布局与预期不符的原因。不过我会重新设计整个结构，因为inline-block 在这里似乎不合适。

还可以查看this page 了解更多信息和替代解决方案。

【讨论】：

我尝试了您的 HTML cmets 建议，效果很好。非常感谢。
不客气。如果它解决了您的问题，请随时接受答案（点击旁边的复选标记）。

【解决方案2】：

这是因为您使用display: inline-block 作为元素，如果您用空格/换行符/制表符分隔元素，它将在每个元素之间创建一个空格，您需要做的是不分隔带有空格/换行符/制表符的元素，或者对空格进行注释，或者设置负边距，您可以从site阅读更多方法来做到这一点

这是您的代码示例：DEMO

*{
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    background-color: #e9eaed;    
    margin: 0;
    padding: 0;
    
}

nav {
    width: 100%;
    background-color: #93bf2e;  
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin: 0;
    padding: 0;  
  
}

#navMain {
    width: 1096px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;   
    
}

#navLeft {
    width: 435px;
    margin: 0;
    padding: 15px 0 15px 40px;    
    display:inline-block;
    
}

#navRight {
    width: 435px;
    margin: 0;
    padding: 15px 40px 15px 0; 
    text-align: right;  
    display:inline-block;    
}



#navCenter {
    width:146px;
    margin: 0;
    padding: 0;     
    display:inline-block;
    vertical-align:middle;     
}

<nav>
    <div id="navMain">
        <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div>
        <div id="navCenter">
            <img src="../GeneralImages/logo.png"/>
        </div>
        <div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div>
    </div>
</nav>

<nav>
    <div id="navMain"><div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"/></div><div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div></div>
</nav>

<nav>
    <div id="navMain">
        <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div><!--
        --><div id="navCenter"><!--
            --><img src="../GeneralImages/logo.png"/><!--
        --></div><!--
        --><div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div><!--
    --></div>
</nav>

【讨论】：