兒童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並沒有忽視父母的填充

回答

相關問題