Html 添加任何填充将完全重新定位内部div

我在将我的内在内容定位于外在内容方面遇到了问题。似乎添加任何填充都会完全破坏内部内容的定位

下面是它在没有填充物的情况下的外观：

下面是它的外观，只需1倍的填充顶部：

从Chrome检查中，我看到它正确地填充了内容，但当我希望它保持在顶部时，它将内容重新定位在外部div底部附近

这是我的CSS：

。外部内容{
边缘顶部：20px；
背景颜色：粉红色；
填充顶部：20px；
宽度：75%；
高度：40px；
}
.内在内容{
背景颜色：浅蓝色；
宽度：75%；
高度：20px；
左边距：自动；
右边距：自动；
文本对齐：居中；
}

这里有一些内容

在示例中添加一些HTML时，它看起来不错。不过，我会更改外部内容的CSS。去掉高度，只需添加填充物即可

。外部内容{
边缘顶部：20px；
背景颜色：粉红色；
填充：20px；
宽度：75%；
}
.内在内容{
背景颜色：浅蓝色；
宽度：75%；
高度：20px；
保证金：0自动；
文本对齐：居中；
}

你好，世界

请在20px的内部内容中发布一个并包含您的HTMLPut行高：

行高：20pxGo research折叠页边距。默认情况下，p标记具有页边距，这将抛出解释它的样式。谢谢