我写了下面的html页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
list-style:none;
margin: 0 auto;
width: 19.5em;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">House</a></li>
<li><a href="">Baby</a></li>
<li><a href="">More</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
输出如下 
克
我在这部分做了一个小改动
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .5em;
}
将边距从 .25em 更改为 .5em，现在显示如下
如果你看到 about 的东西出来了，我不清楚是什么东西导致了这种行为，只是通过改变边距怎么会发生这种情况？
根据下面的建议，我尝试更改 如果我删除 width 列，如果我删除 float:left 列，那么所有的框都是垂直的 即如果我这样做
#nav ul {
list-style:none;
margin: 0 auto;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
}
结果如下
为什么会这样
最佳答案
您的 #nav ul 元素的宽度为 19.5em。
您的 #nav ul li a 元素具有 0.5em 的填充和 0.5em 的边距。宽度方向这加起来为 2em + 2px(边框)每个元素。这意味着您的 4 个元素的宽度为 8em + 8px，没有任何文本。
这允许总共 11.5em 的宽度来包含在您的元素中找到的文本。如果累计文本超过 11.5em，那么您的元素将换行到下一行。
要解决此问题，只需增加 #nav ul 元素的宽度即可:
#nav ul {
width: 25em; /* Adjust accordingly. */
}
关于html - 向 css 添加边距会导致一些不需要的行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19729809/