Calcul de la marge et de la hauteur de remplissage dans une disposition fluide/sensible

Question

Je comprends comment calculer margin-left/padding-left et margin-right/padding-right dans une disposition fluide/sensible. Mais qu'en est-il de margin-top/padding-top et margin-bottom/padding-bottom?

Par exemple, j'ai ce code:

header h1{padding:10px 0 0 15px;} 

Quand je convertir en une mise en page fluide obtenir ceci:

header h1{padding:10px 0 0 8.823529411765%;} 

Comment puis-je convertir le padding-top? En plongeant de 16px (la taille de police du corps)? Quand je fais cela, le résultat est plus de 10px efficace.

Answer 1

Si vous souhaitez que la marge et le remplissage correspondent à la taille de la police, il est préférable d'utiliser un em pour votre unité. Bien que compliqué en raison de l'héritage, un em est une unité typographique représentant la hauteur verticale de 1 ligne de texte. Pour plus d'informations, voir l'article de Jon Tangerine:

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

En outre, Jon a fourni un px à la table de conversion em: http://jontangerine.com/silo/css/pixels-to-ems/

Alors qu'il est courant d'utiliser em est pour des choses comme hauteur de la ligne et les marges, vous pouvez également les utiliser pour littéralement n'importe quelle propriété à la place des pixels.