css 边距大小不同

ymdaylpp 于 2023-03-20 发布在其他

关注(0)|答案(3)|浏览(90)

虽然字体大小和上边距是一样的，但是标题下面的空间比上面的大。我怎样才能使下面的空间和上面的空间一样呢？或者标记应该是这样的吗？这就是问题的一个例子！

.top-heading {
  font-size: 3rem;
  width: 100%;
  text-align: center;
  margin-top: 3rem;
}

.text {
  font-size: 3rem;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 3rem;
}

<main class="entire-section">
  <!-- main part of program, not including aside -->
  <section class="main-part-of-page">

    <article class="">
      <h1 class="top-heading">Keep Cooking Simple</h1>
      <div class="text">

        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspLorem ipsum dolor sit amet, consectetur adipisci elit, sed

我试着用em而不是rem。我期望标题上下的空间是一样的。

css

来源：https://stackoverflow.com/questions/75737368/margin-sizes-are-not-the-same

3条答案

按热度按时间

t5zmwmid1#

值得注意的是，某些浏览器包含预加载的CSS代码作为默认设置，开发人员通常会在CSS文件或全局CSS文件的开头添加此代码，以覆盖任何默认样式。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*选择所有HTML元素，here您可以了解更多关于box-sizing的信息。
如果您尚未尝试使用它，请考虑使用它覆盖浏览器附带的任何默认样式。这样，您可以确保项目的样式符合您自己的自定义设计，而不是依赖浏览器的默认样式。
您也可以选择pseudo-elements并对它们执行相同的操作，如下所示：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

赞(0）回复(0）举报 2023-03-20

gab6jxml2#

将CSS属性line-height添加到标题和.text类中，以确保整个文本（包括标题）的行高一致。

.top-heading {
  margin-top: 3rem;
  font-size: 3rem;
  line-height: 1;
  width: 100%;
  align-items: center;
  text-align: center;
}

.text {
  font-size: 3rem;
  line-height: 1;
  margin: 0 auto;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 3rem;
}

本示例通过将line-height属性设置为1，确保文本上方或下方没有多余的间距。如有必要，可以更改line-height值以获得所需的间距。

赞(0）回复(0）举报 2023-03-20

8iwquhpp3#

好吧，这些解决方案没有工作，但是，我已经确定，我需要一个字体，有一个上升和基线距离相等的顶部和底部。这些看起来像他们会工作：font-family：'吉尔·桑斯'，'吉尔·桑斯·MT'，'卡利布里'，'投石机MS'，'sans-serif'.请发表评论！
约书亚

赞(0）回复(0）举报 2023-03-20