为什么字体大小会改变父 div 的大小和填充？答案

【问题标题】：Why does font size change the size and padding of parent div?为什么字体大小会改变父 div 的大小和填充？
【发布时间】：2021-07-13 13:31:04
【问题描述】：

我遇到了以下问题。假设我在 .html 文件正文中有类似的内容：

html,
body {
  width: 99%;
  height: 99%;
  margin: 0px;
  overflow: hidden;
}

#container1 {
  display: flex;
  gap: 2%;
  width: 90%;
  height: 10%;
  border: 1px black solid;
}

.box {
  border: 1px black solid;
  background-color: yellow;
  width: 100%;
}

.box p {
  text-align: center;
}

<body>
  <div id="container1">
    <div class="box">
      <p>Text 1</p>
    </div>
    <div class="box">
      <p>Text 2</p>
    </div>

  </div>
</body>

我觉得奇怪的事情如下：

黄色框的大小保持不变，直到我更改其中的“p”标签的字体。
如果我将“p”标签的边距设置为margin: 0;，文本会卡在黄色框的顶部。为什么会这样？

如何在不改变其父容器大小的情况下增加字体大小？以及如何使自定义的“p”标签在其父 div 内完美居中？

【问题讨论】：

你确定你的身高是 10% 吗？

标签： html css margin

【解决方案1】：

您将高度设置为percentage。这将是较小尺寸的问题。所以将它的height 设置为px。然后为<p> 赋予与line-height 相同的高度。 <p> 默认也有 margin 。你需要在这里归零。以下代码已修改。

    html,
    body {
      width: 99%;
      height: 99%;
      margin: 0px;
      overflow: hidden;
    }

    #container1 {
      display: flex;
      gap: 2%;
      width: 90%;
      height: 40px;
      border: 1px black solid;
    }

    .box {
      border: 1px black solid;
      background-color: yellow;
      width: 100%;
    }

    .box p {
      text-align: center;
      margin:0;
      line-height:40px
    }

    <body>
      <div id="container1">
        <div class="box">
          <p>Text 1</p>
        </div>
        <div class="box">
          <p>Text 2</p>
        </div>

      </div>
    </body>

【讨论】：

如果 #container1 有 flex-direction: column 而 .box 有 flex: 1 怎么办？如何在垂直放置的黄色框内居中文本？
将align-items:center 添加到#container1

【解决方案2】：

只需使用弹性盒子，最小高度

代码

<!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <style>
html,
body {
  width: 99%;
  height: 99%;
  margin: 0px;
  overflow: hidden;
}

#container1 {
  display: flex;
  gap: 2%;
  width: 90%;
  min-height: 10%;
  border: 1px black solid;
}

.box {
  border: 1px black solid;
  background-color: yellow;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box p {
  text-align: center;
  margin:0;
  font-size: 25px;
}
     </style>
 </head>
    <body>
  <div id="container1">
    <div class="box">
      <p>Text 1</p>
    </div>
    <div class="box">
      <p>Text 2</p>
    </div>

  </div>
</body>
 </html>

希望这是你想要的

【讨论】：

【解决方案3】：

这是你要找的吗？

对于p 标签，您可以将top: 50%/left: 50% 与translateX(-50%) translateY(-50%) 结合使用，在其父元素内动态垂直/水平居中。

html,
body {
  width: 99%;
  height: 99%;
  margin: 0px;
  overflow: hidden;
}

#container1 {
  display: flex;
  gap: 2%;
  width: 90%;
  height: 10%;
  border: 1px black solid;
}

.box {
  border: 1px black solid;
  background-color: yellow;
  width: 100%;
  position: relative;
}

.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); 
  text-align: center;
  font-size: 30px;
  margin: 0;
    
}

  <div id="container1">
    <div class="box">
      <p>Text 1</p>
    </div>
    <div class="box">
      <p>Text 2</p>
    </div>
  </div>

【讨论】：