儿童DIV -margin并没有忽视父母的填充

我想内部div来填补外层div。我被告知在孩子身上使用负填充，这听起来合乎逻辑，但在我的情况下不起作用。我相信这是由于我在父母和子女的使用过渡。儿童DIV -margin并没有忽视父母的填充

我有孩子从透明到不透明的悬停。我有孩子的背景图像从父母的背景图像过渡。我想填充添加到父，这样我可以自定义div的高度，但是当我这样做，孩子不填充父。当我给孩子添加负边距时，没有效果。

.outer{ 
 
    font-size: 2em; 
 
\t border: 2px solid #898080; 
 
\t margin-bottom: 40px; 
 
\t border-radius: 20px; 
 
\t text-shadow: 5px 5px 5px #000000; 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t transition: all 1s ease-in-out; 
 
\t background-color: black; 
 
\t 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{ 
 
\t zoom: 1.0; 
 
\t border-radius: 17px; 
 
\t text-shadow: 5px 5px 5px #000000; 
 
\t background-color: red; 
 
\t opacity: 0; 
 
    -webkit-transition: opacity 1s linear; 
 
    -moz-transition: opacity 1s linear; 
 
    transition: opacity 1s linear; 
 
} 
 

 
#inner:hover{ 
 
\t opacity: 1; 
 
}

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

来源

2017-10-17 Daniel Lee

你可以试着描述你想实现什么样的悬停效果/过渡的？此外，我不认为有负填充这样的事情。负边距工作正常。 – Pevara

我有孩子从透明到不透明的悬停。我将孩子的背景图像混合到父母的背景图像中。我想添加填充到父项，以便我可以自定义框的高度，但是当我这样做时，子项不填充父项。当我给孩子添加负边距时，没有效果。 –

请不要发布您的代码到第三方网站，然后链接到他们在您的问题时，你可以在这里创建一个工作代码段。 –

好了，你想设置元素的尺寸线槽采用的填充物，但希望该元素的内容忽略填充。我想，如果你这样说，就会发现padding不是这里的正确工具。你所要做的就是设定孩子的尺寸，根据定义，父母会遵循。

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

来源

2017-10-17 19:18:41 Pevara

解决了我的问题。 –

如果这解决了问题，请接受答案 –

儿童DIV -margin并没有忽视父母的填充

回答

相关问题