Javascript 为什么子元素的高度不是父元素的100%？

*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
利润率：50像素；
}
navbar先生{
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：深绿色；
字体系列：“Vollkorn”，衬线；
字号：1.2rem；
字体大小：粗体；
}
.标题{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：3倍实心暗绿色；
}
.文本{
填充：3x10px；
}
.复选框{
左边框：3倍实心暗绿色；
光标：指针；
身高：100%；
宽度：45px；
背景：粉红色；
文本对齐：居中；
}

这里有一些文字

您正在向.text添加一个影响父文本高度的上/下三倍填充。即使您的复选框有100%的高度，由于此填充，它也无法到达父项的边界。 最简单的解决方案是在.checkbox中添加一个填充

.checkbox{
填充：3px0px；
}

从

.header

中删除

对齐项目

，并从

中删除
高度：100%
。复选框

这是一种常见情况。这导致了很多混乱。但它并没有占据整个屏幕，因为父元素并没有占据100%的高度。因此，解决方案是将所有父节点的高度设置为100%。甚至

html

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
    height: 100%;
}
body {
  margin: 50px;
  height: 100%;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: darkgreen;
  font-family: 'Vollkorn', serif;
  font-size: 1.2rem;
  font-weight: bold;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid darkgreen;
  height: 100%;
}

.text {
  padding: 3px 10px;
   height: 100%;
  
}

---

因为

text

@Manjuboyz中有填充，我如何解决它，以及为什么在

中添加填充。text

会影响

.checkbox

？@Manjuboyz我想要填充，这就是它存在的原因，根据我的说法

text

不是

checkbox

的父项，两者都是兄弟。哎呀，我的错了，会检查的，谢谢。请允许我问一下是否需要填充？但问题是，在这种情况下，它可以正常工作，但如果将窗口大小调整为较小的大小，则

文本将占用两行，然后再次出现问题。如何解决？我已经添加了一个更新我的问题，请看一看！移除
align items:center
和
height:100%
对我来说效果很好。正如我在自己的回答中提到的。