html - 添加边框会将包装器向上推并使 div 内容溢出？

Question

我一直在尝试找到解决这个问题的方法，并且在 Google 上搜索了一个多小时，但我不确定如何解决这个问题。如果我向 div 包装器添加边框，它会将包装器推到页面顶部，而 float 的 div 保持在同一位置。我尝试摆弄溢出属性以及相对和绝对定位。

css 在这里

html, body 
{ 
        height : 100% ;
        margin : 0 ;
        padding : 0 
}

html { background : #FFFFFF } 

#wrapper 
{ 
       background : #0066FF ;
       color : white ;
       height : 780px ;
       width : 1620px ;
       font : 16px "Arial", sans-serif ;
       margin : auto ;
       border : 4px solid black 
}



#header 
{ 
         height : 90px ;
         text-align : center ;
         color : black ; 
         background : #66CCFF ;
         padding : 3px 0px ;
         margin : 100px 0 10px ;
         clear : both
}

#header h1 
{
        font-weight : bold ;
        font-size : 35px ;
        padding : 20px 0
}

#left 
{ 
        float : left ;
        width : 180px ;
        height : 660px ;
        background-color : #66CCFF ;
        padding : 5px ;
        margin-right : 25px
}

#content 
{ 
     float : left ;
     background-color : #66CCFF ; 
     color : black ;
     height : 660px ; 
     width : 1140px ;
     margin-right : 25px ;
     padding : 5px 
}

#right 
{ 
       float : left ;
       background-color : #66CCFF ;
       color : black ;
       width : 220px ;
       height : 660px ;
       padding : 5px 
}

#footer 
{ 
       background-color : black ; 
       clear : both 
}

我也做了一个JSfiddle其中包含 HTML 和一个带有深蓝色背景的包装器示例。

Answer 1

此类问题通常是由默认的空格和填充引起的。浏览器有一个默认的填充设置，通常是 5 或 10 像素，这有时真的很令人沮丧。当然，这并不总是导致问题的原因。每当我遇到这样的问题时，我都会尝试将 padding 0 和 margin 0 添加到代码中的每个对象，甚至是 html 和 body，示例:

#example {
margin: 0px;
padding: 0px;
};

尝试 [我看到你有几个，但不是每个对象]。我不确定这是否能解决问题，但值得一试，而且它经常对我有用。这对任何人来说都是一个令人沮丧的问题。

编辑:[删除关于结束标签的评论]