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.