html - 为 H1 和 H2 标签添加 margin-left

标签 html css

我以前似乎从来没有遇到过这个问题,但是为什么当我专门对它们应用 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/

相关文章:

css - 我可以让内容重叠滚动条吗? CSS

php - Magento 快速搜索

php - 位置感知移动应用程序,需要有关我应该使用哪些技术的建议

html - 将行转换为特定的键盘字符

html - Bootstrap 画廊悬停

javascript - 带有 getElementsByTagName 的嵌套标签名称不起作用

javascript - 如何将悬停效果更改为仅针对下拉菜单的 onclick

html - 什么样的文本可以包含在 HTML 代码标签中?

CSS类继承/选择器

javascript - ASP.net 使对象可点击