[Résolu] Marge haute pour élément sous flottants

_laurent a écrit :
La marge est toujours présente, ce sont les éléments en float qui fusionnent avec.

_laurent a écrit :
Si tu rajoutes overflow:hidden; sur le #header tu vas retrouver ta marge à l'intérieur.

boteha_2 a écrit :
Comme il n'est pas question de mettre body en overflow: hidden je suis contraint de passer #header en flexbox (ou grid) pour aligner p#tel à gauche et p#ras à droite sans avoir besoin de les faire flotter.

l'article a écrit :
L’utilisation d’un contexte de formatage, via la propriété overflow et les valeurs auto ou hidden, empêche la fusion des marges.

boteha_2 a écrit :
Au fait, position: sticky, j'espère que c'est bien reconnu par les téléphones ?

ul#menuhaut::after 
{
content: "";
display: block;
background-color: #FFF;
height: 20px
}

boteha_2 a écrit :
Pour aligner les deux éléments p#trust et p#ras à droite je me contente de déclarer flex: 1 pour le premier élément.

boteha_2 a écrit :
J'aurais pensé pouvoir obtenir le même résultat en déclarant align-self: flex-end pour p#trust et p#ras mais cela ne marche pas (et à vrai dire je ne comprends pas bien align-self).

boteha_2 a écrit :

Sous le bloc en position sticky j'aimerais avoir un espace opaque blanc de 20px de haut.
Comme j'ai une border je ne peux pas faire cela avec le padding.

_laurent a écrit :
Tu as un border pour les test mais vas-tu le garder comme ça ?

@keyframes trg
{
0% {background-color: #FFF; margin-top: 100px}
50% {background-color: #EDF0F1; margin-top: 100px}
100% {background-color: #FFF; margin-top: 100px}
}

p#lorem:target {animation: trg 6s step-start both; background-color: #EDF0F1}