关于负边距：

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/

他们是非常有效的CSS

我不是在开玩笑。 W3C甚至表示，“允许保证金属性的负值......”Nuff说。查看article了解更多详情。

负边距不是黑客

尤其如此。这是因为它没有正确理解负边缘，因此它得到了它的黑客形象。如果您使用它来修复您在其他地方所犯的错误，它只会变成黑客。

Answer 2

我认为问题在于您的字体，因为它看起来好像是从右边略微开始字母。

你可以使用text-indent来解决这个问题 - 如果你使用像-0.1em之类的东西那么它应该摆脱字母的左边填充，无论它的大小如何：

@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;
}
* { text-indent: -0.08em; }

<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>

这种方法的唯一问题是，如果文本超过2行或更多行，后续行将不会有缩进

Answer 3

您可以在css文件中使用position: absolute;使元素准确显示在您希望的位置。然后定义left: 0px;或者你想要的那样。希望有所帮助。

请参阅http://www.w3schools.com/cssref/pr_class_position.asp

Answer 4

尝试使用body css上的填充顶部

@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-top: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>

准确对齐元素

4 个答案:

关于负边距：