Note : pas de hack sur cette page, les astuces se basent sur des comportements faisant partie des spécifications.

.conteneur{
   margin: 0 -10px;
}
.blocs{
   margin: 10px;
}

1. La valeur en pourcentage de padding-top ou -bottom se calcule par-rapport à la largeur de l'élément parent de l'élément cible. Idem pour margin-top et margin-bottom. Exemple : un bloc de 200px de largeur dans un bloc de 500px de largeur. Si j'attribue à header la règle CSS suivante : header{ padding-bottom: 100%}, le padding-bottom aura une valeur calculée de 500px.

Applications :

• l'astuce des ratios intrinsèques de Thierry Koblentz, très répandue pour créer un lecteur vidéo YouTube responsive : https://alistapart.com/article/creating-intrinsic-ratios-for-video.
• le recadrage automatique des images en CSS avec background-cover + l'astuce des ratios intrinsèques : http://daverupert.com/2012/04/uncle-daves-ol-padded-box/ (un résultat convenable est possible sans les ratios, ici l'intérêt de ces derniers est d'empêcher que l'image d'arrière-plan ne soit croppée quand la fenêtre se réduit)
• une déclinaison de l'astuce des ratios intrinsèque avec un contenu textuel : https://keithjgrant.com/posts/2017/03/aspect-ratios/ (dans la technique classique le contenu est poussé hors de sa boîte par la marge, et est repositionné dans sa boîte grâce au positionnement absolu. Cependant si le contenu est plus haut que la marge il peut déborder visuellement. Cette technique alternative utilise les pseudo-éléments :before et :after.)
• une autre déclinaison des ratios utilisant les custom properties, calc() et var() afin d'éviter le reflow des contenus embarqués (images, vidéos, iframes) : http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/
• un récap visuel : http://www.mademyday.de/css-height-equals-width-with-pure-css.html