我以前似乎从来没有遇到过这个问题，但是当我特别地对H1和H2元素应用左边距时，为什么它们不在左边均匀地对齐呢？
下面是问题代码：
* {
margin: 0;
padding: 0;
}
div h1,
h2 {
margin-left: 1em;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>但当我把左边距应用到div标记时，它们会像我所期望的那样完全对齐吗？
以下是工作代码：
* {
margin: 0;
padding: 0;
}
div {
margin-left: 1em;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>我不明白为什么会这样。
最佳答案
Em值可能是最难将ol'noodle包装起来的值，这可能是因为它们的概念非常抽象和武断。这是独家新闻：1em等于所讨论元素的电流font-size。如果您没有在页面的任何地方设置字体大小，那么它将是浏览器的默认值，可能是16px。因此默认情况下1em=16px。如果你要在你的身体上设置20px的字体大小，那么1em=20px。
https://css-tricks.com/css-font-size/
在你的代码中，h1和h2的字体大小不同。
当你这样写代码的时候
h1, h2{
margin-left: 1em;
}
意思是
h1{
margin-left: 40px;
}
h2{
margin-left: 30px;
}
关于html - 向H1和H2标签添加左边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45854979/