Question

我希望内部div填充外部div。我被告知要对孩子使用负填充，这听起来合乎逻辑但在我的情况下并不起作用。我相信这是由于我在父和子div上使用的转换。

我让孩子在悬停时从透明变为不透明。我将孩子的背景图像从父母的背景图像转换过来。我想为父级添加填充，以便我可以自定义div的高度，但是当我这样做时，孩子不会填充父级。当我给孩子添加负边距时，没有效果。

＆＃13;

.outer{
  font-size: 2em;
	border: 2px solid #898080;
	margin-bottom: 40px;
	border-radius: 20px;
	text-shadow: 5px 5px 5px #000000;
	position: relative;
	display: inline-block; 
	transition: all 1s ease-in-out;
	background-color: black;
	padding: 30px 0px 30px 0px;
}

/* Scale up the box */
.outer:hover {
  color: white;
  border: 2px solid #d8e6ee;
  transform: scale(1.1, 1.1);
  transition: background .5 ease;
  opacity: 1;
}


#inner{
	zoom: 1.0;
	border-radius: 17px;
	text-shadow: 5px 5px 5px #000000;
	background-color: red;
	opacity: 0;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

#inner:hover{
	opacity: 1;
}

＆＃13;

<div class="outer">
    <div id="inner">Hello World</div>
</div>

＆＃13;

Answer 1

好的，所以你试图通过使用填充来设置元素的尺寸，但是你希望该元素的内容忽略填充。我想，如果你这样说，那么填充在这里就不是正确的工具了。您所要做的就是设置子项的维度，按照定义，父项将遵循。

在代码中，将填充从.outer移动到#inner。

子div -margin不会忽略父级的填充

1 个答案: