2017-10-17 1 views
0

Je voudrais que div interne remplisse le div externe. On m'a dit d'utiliser un rembourrage négatif sur l'enfant, ce qui semble logique mais ne fonctionne pas dans mon cas. Je crois que cela est dû aux transitions que j'utilise sur les divs parents et enfants.L'enfant div -margin n'ignore pas le remplissage des parents

J'ai l'enfant pour passer de transparent à pas transparent sur un vol stationnaire. L'image d'arrière-plan de l'enfant passe de l'image d'arrière-plan du parent. Je veux ajouter un remplissage au parent afin que je puisse personnaliser la taille de la div, mais quand je le fais, l'enfant ne remplit pas le parent. Lorsque j'ajoute une marge négative à l'enfant, il n'y a aucun effet.

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

+0

pouvez-vous essayer de décrire quel type d'effet/transition hover que vous essayez d'atteindre exactement? En outre, je ne pense pas qu'il existe une telle chose comme rembourrage négatif. La marge négative fonctionne bien cependant. – Pevara

+0

J'ai l'enfant pour passer de transparent à pas transparent sur un vol stationnaire. J'ai l'image de fond de l'enfant se fondre dans l'image de fond du parent. Je veux ajouter un remplissage au parent afin que je puisse personnaliser la taille de la boîte, mais quand je le fais, l'enfant ne remplit pas le parent. Lorsque j'ajoute une marge négative à l'enfant, il n'y a aucun effet. –

+0

Veuillez ne pas publier votre code sur des sites tiers, puis reliez-les à vos questions lorsque vous pouvez créer un extrait de code de travail ici. –

Répondre

0

Ok, donc vous essayez de définir les dimensions d'un élément creux l'utilisation de rembourrage, mais vous voulez le contenu de cet élément pour ignorer le rembourrage. Je suppose que, si vous parlez de cette façon, il devient évident que le rembourrage n'est pas le bon outil ici. Tout ce que vous avez à faire est de définir les dimensions de l'enfant, et par définition, le parent suivra.

Dans le code qui signifierait, déplacez le remplissage du .outer au #inner.

+0

Résolu mon problème. –

+0

Si cela a résolu le problème, acceptez la réponse –