Question

我在将内部内容放入外部内容时遇到问题。似乎添加任何填充都会完全抛弃内部内容的定位。

以下是没有填充的外观： before padding

以下是1px填充顶部的外观： after padding

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

这是我的CSS：

.outer-content {
	 margin-top: 20px;
	 background-color: pink;
	 padding-top: 20px;
	 width: 75%;
	 height: 40px;
 }

.inner-content {
	background-color: lightblue;
	width: 75%;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

<div class="outer-content">
    <div class="inner-content">
        <p>Here is some content</p>
    </div>
</div>

有谁知道为什么会这样？

编辑：我已经发现删除文本周围的p标签会修复它。但是，当你有一个p标签时，我仍然不确定为什么它会像那样。

Answer 1

在示例中添加一些HTML时看起来很不错。但是我会更改外部内容的CSS。取出高度，只需添加填充。

＆＃13;

.outer-content {
  margin-top: 20px;
  background-color: pink;
  padding: 20px;
  width: 75%;
}
.inner-content {
  background-color: lightblue;
  width: 75%;
  height: 20px;
  margin: 0 auto;
  text-align: center;
}

＆＃13;

<div class="outer-content">
  <div class="inner-content">Hello World</div>
</div>

＆＃13;

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

1 个答案: