我正在改编我在“经济学人”（here）上发现的一篇文章，我在页脚中遇到了一个问题，它在页脚下面显示了一条很细的白色空间。
我实际上已经解决了这个问题，但我不确定为什么我做了什么工作..这里是它的笔（here），这里是页脚和HTML代码。
/****************
Footer
****************/
/*
The footer is organized into three rows with columns in each row.
*/
footer {
height: 400px;
border-top: 5px red solid;
margin-top: 50px;
background-color: #c1c1c1;
color: white;
background-color: #161616;
}
.footer-container {
width: 80%;
height: 100%;
margin: 0 auto;
}
footer ul {
list-style: none;
}
a:link {
text-decoration: none;
color: #b6b6b6;
font-weight: bold;
font-size: .9em;
}
a:link:hover {
color: white;
}
.footer-link {
padding: 10px 0;
color: #b6b6b6;
font-weight: bold;
}
.footer-link:hover {
color: white;
cursor: pointer;
}
.row-1 {
display: flex;
height: 50%;
}
.row-1-col-1 {
width: 10%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.row-1-col-1 ul {
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 0;
padding: 0 15px;
height: 70%;
}
.row-1-col-2 {
width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* "Keep updated */
.row-1-col-2 div p {
font-weight: bold;
color: #7a7a7a;
}
.row-1-col-2 > div {
height: 70%;
margin-left: 30px;
padding-left: 30px;
border-left: 1px #7a7a7a solid;
border-right: 1px #7a7a7a solid;
}
.row-1-col-2 ul {
padding: 0;
display: flex;
}
.footer-s-media-icon {
width: 25px;
padding: 0 15px;
filter: grayscale(100%);
}
.row-1-col-3 {
display: flex;
flex-direction: column;
justify-content: center;
width: 30%;
}
.row-1-col-3 ul {
height: 70%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.row-2 {
height: 40%;
border-top: 1px #7a7a7a solid;
border-bottom: 1px #7a7a7a solid;
}
.row-2-col-1 {
height: 100%;
}
.row-2-col-1 > div {
margin: 0 auto;
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.row-2-col-1 > div p {
margin: 0;
text-align: center;
}
/* Published since Sept...to take part in... */
.row-2-col-1 > div p:first-child {
font-weight: bold;
}
/* "a severe contest between intellegence... */
.row-2-col-1 > div p:nth-child(2) {
font-style: italic;
}
.row-3 {
height: 9%;
width: 100%;
display: flex;
}
.row-3-col-1 {
display: flex;
width: 100%;
}
.row-3-col-1 ul {
display: flex;
padding: 0;
margin-bottom: 0;
}
.row-3-col-1 li {
padding: 0 8px;
font-size: .8em;
}
.row-3-col-1 p {
margin-bottom: 0;
margin-top 0;
margin-left: auto;
font-size: .8em;
}
<footer>
<div class="footer-container">
<div class="row-1">
<div class="row-1-col-1">
<ul>
<li class="footer-link">Subscribe</li>
<li class="footer-link">Contact us</li>
<li class="footer-link">Help</li>
</ul>
</div>
<div class="row-1-col-2">
<div>
<p>Keep updated</p>
<ul>
<li><img src="https://www.celestionplus.com/wp-content/themes/celestion-impulse-response-2017/img/icon-facebook.png" class="footer-s-media-icon"></li>
<li><img src="http://www.vonmaur.com/Images/Social/twitter-logo-blue.png" class="footer-s-media-icon"></li>
<li><img src="https://www.carpetone.com/~/media/CarpetOne/Modules/Global/Footer/SocialLinks/google.png?h=30&w=30&la=en" class="footer-s-media-icon"></li>
<li><img src="http://www.shoetastic.ie/skin/frontend/default/theme054/images/linkedin-logo.png" class="footer-s-media-icon"></li>
<li><img src="https://2.bp.blogspot.com/-GEyWc6EEApk/VYCEOt34T-I/AAAAAAAAAmw/slVlbI1gy_c/s1600/tumblr%2Blogo%2B30x30.png" class="footer-s-media-icon"></li>
<li><img src="http://www.oacsd.org/sysimages/iconIG.png" class="footer-s-media-icon"></li>
<li><img src="http://www.sunyjefferson.edu/sites/default/files/images/YouTube-icon.png" class="footer-s-media-icon"></li>
<li><img src="http://theriveratranchomirage.com/wp-content/uploads/2015/11/favicon.png" class="footer-s-media-icon"></li>
</ul>
<a href="google.com">Subscribe to The Economist newsletters</a>
</div>
</div>
<div class="row-1-col-3">
<ul>
<li class="footer-link">Advertise</li>
<li class="footer-link">Careers</li>
<li class="footer-link">Site Map</li>
<li class="footer-link">Reprints</li>
<li class="footer-link">Media Centre</li>
</ul>
</div>
</div>
<div class="row-2">
<div class="row-2-col-1">
<div>
<p>Published since September 1843 to take part in</p>
<p> “a severe contest between intelligence, which presses forward, and an unworthy, timid ignorance obstructing our progress.”</p>
</div>
</div>
</div>
<div class="row-3">
<div class="row-3-col-1">
<ul>
<li>Terms of Use</li>
<li>Privacy</li>
<li>Cookies</li>
<li>Accessibility</li>
</ul>
<p>Copyright © The Economist Newspaper Limited 2017. All rights reserved.</p>
</div>
</div>
</div>
</footer>
页脚由三行组成，所有行都落在容器内。色谱柱的高度分别为50％，40％和 9％。问题是由于第3行的高度为10％，应该总计到页脚容器的100％。
我的问题是，为什么更改第3行的高度可以解决这个问题？有没有人有任何背景知识可以为我填写这些信息？
答案 0 :(得分：1)
由于您使用.row-2应用的边框不是作为元素高度的一部分计算的。它们除了它的高度之外还有它们。最后.row-2比2％大2％。
您可以使用box-sizing: border-box;解决此问题。
<强>边界框
这是文档处于Quirks模式时Internet Explorer使用的盒子模型。请注意，填充和边框将位于框内部，例如.box {width：350px; border：10px solid black;}导致在浏览器中呈现的宽度为350px的框。内容框不能为负，并且会被置于0，从而无法使用边框来使元素消失。 这里的尺寸计算为，width = border + padding +内容的宽度，height = border + padding +内容的高度。
.footer-container > .row-2 {
box-sizing: border-box;
}
你也可以使用calc()作为身高。
.row-2 {
height: calc( 40% - 2px );
border-top: 1px #7a7a7a solid;
border-bottom: 1px #7a7a7a solid;
}
我对calc（）的一个问题是，如果你改变边框的厚度，你还必须更新高度值。使用box-sizing: border-box;它是自动的。