html - 元素左对齐

Question

我想将标题和段落元素精确左对齐。有没有任何标准方法可以做到这一点，或者我只需要使用 padding-left 即可。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
*{
  font-family: 'Lato', sans-serif;
	box-sizing:border-box;
  margin:0;
}
h1{
  font-size:100px;
}
p{
  font-size:21px;
}
body{
  padding:100px;
}

<p>Hello, I am</p>
<h1>K. Boozer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>

Answer 1

在 h1 上使用一些负的 margin-left。出现空格是因为字体太大，并且每种字体都有自己不同的字母大小。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
*{
  font-family: 'Lato', sans-serif;
	box-sizing:border-box;
  margin:0;
}
h1{
  font-size:100px;
  margin-left: -6px;
}
p{
  font-size:21px;
}
body{
  padding:100px;
}

<p>Hello, I am</p>
<h1>K. Boozer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>

关于负边距:

https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

They are extremely valid CSS

I’m not kidding on this one. W3C even says that, “Negative values for margin properties are allowed…” ‘Nuff said. Check out the article for more details.

Negative margins are not a hack

This is especially true. It’s because of not understanding negative margins properly that it got its hackish image. It only becomes a hack if you use it to fix an error you made elsewhere.