子div -margin不忽略父母的填充

Question

I would like inner div to fill the outer div. I was told to use a negative padding on the child, which sounds logical but doesn't work in my case. I believe this is due to the transitions that I am using on the parent and child divs.

I have the child to go from transparent to not transparent on a hover. I have the child's background image transitioning from the parent's background image. I want to add padding to the parent so that I can customize the height of the div, however when I do, the child doesn't fill the parent. When I add a negative margin to the child, there is no effect.

 .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; } 

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

Answer 1

Ok, so you are trying to set the dimensions of an element trough the use of padding, but you want the content of that element to ignore the padding. I guess, if you put it that way it becomes quite obvious that padding is not the right tool here. All you have to do is set the dimensions of the child, and by definition the parent will follow.

In code that would mean, move the padding from the .outer to the #inner.