我以前似乎从来没有遇到过这个问题,但是为什么当我专门对它们应用 margin-left 时,H1 和 H2 元素没有在左侧均匀对齐?
这是问题代码:
* {
margin: 0;
padding: 0;
}
div h1,
h2 {
margin-left: 1em;
}
<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>
但是当我将 margin-left 应用于 div 标签时,它们会像我期望的那样完美对齐吗?
这是工作代码:
* {
margin: 0;
padding: 0;
}
div {
margin-left: 1em;
}
<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>
我不明白为什么会这样。
最佳答案
*{
margin: 0;
padding: 0;
}
div h1,h2{
margin-left:3%;
}
<!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。 h1 和 h2 标签的字体大小输出的原因是不同的,所以通过在 % 中设置边距将给出期望的输出,
关于html - 为 H1 和 H2 标签添加 margin-left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45854979/