Comment se rappeler en CSS que la marge est à l'extérieur de la bordure et le remplissage à l'intérieur
https://stackoverflow.com/questions/32668
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je ne modifie pas le CSS très souvent, et presque à chaque fois que j'ai besoin d'aller chercher sur Google le Modèle de boîte CSS pour vérifier si padding est à l'intérieur du border et margin à l'extérieur, ou vice versa.(Je viens de vérifier à nouveau et padding Est à l'intérieur).
Quelqu'un a-t-il une bonne façon de s'en souvenir ?Un peu mnémonique, une bonne explication de pourquoi les noms sont ainsi ronds...
La solution
Lorsque vous travaillez avec CSS, cela vous rend finalement fou, la cellule rembourrée dans laquelle ils vous mettront a le remplissage sur le à l'intérieur des murs.
Autres conseils
broche - P est dedans
Vous utilisez une boîte.Si vous mettiez quelque chose dans une boîte, vous mettriez du rembourrage à l'intérieur pour vous assurer qu'il ne heurte pas les côtés.La marge serait alors l’autre chose.
Imprimez le diagramme à partir du Dimensions de la boîte section du cahier des charges et affichez-la au mur.
Pour moi, "rembourrage" semble plus intérieur que "marge".Peut-être que penser à la page imprimée aiderait ?Les marges sont des zones situées à l'extérieur - en général, vous ne pouvez même pas imprimer jusqu'au bord - elles ne sont pas marquables.Dans ces marges, le contenu pourrait être complété pour fournir une barrière supplémentaire entre le contenu et la marge ?
Une fois que vous aurez suffisamment travaillé en CSS, il deviendra une seconde nature de s'en souvenir.
Le rembourrage est généralement utilisé à l’intérieur.Que ce soit à l'intérieur d'un mur ou d'un carton de livraison, c'est simple.Et si le rembourrage est à l’intérieur, alors la marge est à l’extérieur.Cela ne devrait pas être trop difficile.
Je viens de l'apprendre au fil du temps - le modèle de boîte est assez simple mais la principale raison pour laquelle les gens le trouvent difficile est parce que body ne casse pas visiblement le modèle.
Vraiment, si tu donnes body une marge et un fond vous devriez le voir entouré d'une bande blanche.Mais ce n'est pas le cas - bodyLe remplissage de est le même que la marge.Cela établit quelques éléments incorrects sur le modèle de boîte.
J'y pense généralement comme ceci :
- margin = espacement autour de la boîte ;
- border = le bord de la boîte ;
- padding = espace à l’intérieur de la boîte.
Tim Saunders a donné d'excellents conseils : lorsque j'ai commencé avec CSS, je me suis fait un devoir de créer une bonne feuille de style de base entièrement commentée.Cette feuille de style a changé plusieurs fois et reste une ressource formidable.
Cependant, lorsque j'ai rencontré mes propres problèmes de modèle de boîte, j'ai commencé à utiliser « Mo Pi ».Comme dans "Je ne suis pas assez gros, j'ai besoin de manger du mo pi." Étrange, mais cela a fonctionné pour moi.Bien sûr, j'ai pris vingt kilos en apprenant le CSS... ;-)
utilisez Firebug pour vous aider à voir.
Créez-vous une feuille de style de base commentée que vous pourrez utiliser comme modèle chaque fois que vous aurez besoin de créer un nouveau site ou de modifier un site existant.
Vous pouvez y ajouter des éléments au fur et à mesure que vous développez vos connaissances et l'appliquer à différents navigateurs pour voir comment diverses choses se comportent.
Vous pourrez également ajouter des commentaires ou des exemples sur d'autres éléments difficiles à retenir ou contre-intuitifs.
Ajoutez une bordure, même temporairement.En jouant avec les chiffres, vous verrez la différence.
En fait, les bordures temporaires autour des éléments sont une manière utile de travailler, car vous pouvez voir pourquoi les flotteurs tombent, etc.
Je sais que c'est une réponse à votre question, mais plutôt un conseil.Chaque fois que je traite de marge et de remplissage, j'ajoute une bordure autour de la partie avec laquelle vous travaillez, puis à partir de là, cela me montre la pièce avec laquelle je dois travailler.Quand tout est prêt, je supprime la bordure.
PAdding est une partie du PAinting d'un élément :il étend l'élément arrière-plan.Il est logique de considérer une paire élément + rembourrage comme partageant un arrière-plan commun.Le rembourrage est analogue à la toile du tableau :plus le rembourrage est grand, plus la toile et donc l'arrière-plan sont grands.La bordure (le cadre du tableau) ferait le tour de cette paire.Et marge séparera les peintures sur le mur de la galerie.Réfléchir au concept d'arrière-plan de l'objet permet de coller la paire objet + rembourrage ensemble.Les explications habituelles de ce qui est à l’intérieur et à l’extérieur ne restent pas en mémoire :au bout d'un moment, tout le monde revient à la confusion initiale.N'oubliez pas également que les marges peuvent être réduites verticalement et que le remplissage ne l'est pas.
Au lieu de demander encore et encore à Google, vous utilisez simplement la fenêtre de l'inspecteur.Dans cet onglet de style et faites défiler vers le bas, vous pouvez voir comme ceci.
Marge : lorsque vous souhaitez déplacer le bloc.Rembourrage:Lorsque vous souhaitez déplacer les éléments dans un bloc.
