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

Question

我遇到了以下问题。假设我在 .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 内完美居中？

Answer 1

只用flex box, min-height

Code

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

希望这是你想要的

Answer 2

这是您要找的吗？

对于 p 标记，您可以结合使用 top: 50%/left: 50% 和 translateX(-50%) translateY(-50%) 来动态 vertically/horizontally 将元素置于其父元素的中心。

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>

Answer 3

You set the height as a percentage. This will be a problem in smaller sizes. So set its height to px. Then give the same amount of height to the <p> as line-height. Also <p> has a margin by default. You need to zero it here. The following code has been modified.

    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>

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

Why does font size change the size and padding of parent div?

html

css

margin