Question

.header {
  margin: 0 auto;
  text-align: center
}

<div class="header">
  <h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </h1>
  <h3>
    Duis dictum eget lacus nec molestie Integer non nisl leo
  </h3>
  <h5>
    Quisque eu luctus tellus. Mauris et dictum ante
  </h5>
</div>

当我在浏览器中运行它时，

我的h1元素顶部和底部的边距为16.080像素
我的h3元素顶部和底部的边距为14.040像素
我的h5元素顶部和底部的边距为16.633像素

我想要的结果是这样：

.title {
  margin: 0;
  text-align: center;
}

<div class="header">
  <h1 class="title">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </h1>
  <h3 class="title">
    Duis dictum eget lacus nec molestie Integer non nisl leo
  </h3>
  <h5 class="title">
    Quisque eu luctus tellus. Mauris et dictum ante
  </h5>
</div>

这给了我想要的结果，但是我不想为我所有的class="title"元素都拥有h。

如何在不使用三个class="title"的情况下执行此操作？

Answer 1

标题标签（h1，h2，h3等）带有默认样式。看到这里-https://www.w3schools.com/cssref/css_default_values.asp

默认样式之一是边距。您可以使用CSS轻松删除它。

<!DOCTYPE html>
<html>

<head>
  <style>
    .header {
      text-align: center
    }
    h1, h3, h5 {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </h1>
    <h3>
      Duis dictum eget lacus nec molestie Integer non nisl leo
    </h3>
    <h5>
      Quisque eu luctus tellus. Mauris et dictum ante
    </h5>
  </div>
</body>

</html>

Answer 2

在CSS内部使用

h1 {
    margin: 0 auto;
    text-align: center;
}

我的文字在顶部和底部都有边距。为什么？

2 个答案: