Chapitre 11 : Modèle de boîte et remplissage, bordure et marge

Le modèle Box est l'un des éléments les plus fondamentaux du CSS, car il contrôle la conception et la mise en page de nombreux aspects d'une page Web. Chaque élément d'une page Web est considéré comme une « boîte » et cette boîte peut avoir différentes propriétés, telles que la largeur, la hauteur, le remplissage, les bordures et les marges.

Modèle de boîte

Le modèle de boîte est une représentation de la façon dont chaque élément est rendu sur la page. La « boîte » d'un élément comprend le contenu, le remplissage, la bordure et la marge de l'élément. Le contenu est le texte, l'image ou tout autre élément à l'intérieur de l'élément. Le remplissage est l'espace entre le contenu et la bordure. La bordure est une ligne qui entoure le contenu et le remplissage. La marge est l'espace entre la bordure et les éléments voisins.

Pour afficher le modèle de boîte, vous pouvez utiliser l'outil d'inspection du navigateur. Cela affichera la largeur et la hauteur du contenu, le remplissage, la bordure et la marge d'un élément.

Rembourrage

Le remplissage est l'espace entre le contenu d'un élément et sa bordure. Vous pouvez définir le remplissage de tous les côtés à la fois en utilisant la propriété 'padding', ou vous pouvez définir chaque côté individuellement en utilisant 'padding-top', 'padding-right', 'padding-bottom' et 'padding-left'. < /p>

Par exemple, si vous souhaitez ajouter un remplissage de 10 px en haut d'un élément, vous utiliserez 'padding-top: 10px;'. Si vous souhaitez ajouter un remplissage de 10 px sur tous les côtés, vous utiliserez « padding : 10px ; ». Le remplissage est transparent, donc l'arrière-plan de l'élément sera visible à travers lui.

Bordure

Une bordure est une ligne qui entoure le remplissage et le contenu d'un élément. Vous pouvez définir la largeur, le style et la couleur de la bordure en utilisant respectivement les propriétés « border-width », « border-style » et « border-color ». Vous pouvez également définir les trois propriétés à la fois en utilisant la propriété 'border'.

Continuez dans notre application.

Vous pouvez écouter le livre audio écran éteint, recevoir un certificat gratuit pour ce cours et accéder également à 5 000 autres cours en ligne gratuits.

Ou poursuivez votre lecture ci-dessous...

Téléchargez l'application

Par exemple, si vous souhaitez une bordure solide de 1 px de large autour d'un élément, vous utiliserez 'border: 1px solid;'. Si vous vouliez que cette bordure soit rouge, vous utiliseriez 'border: 1px solid red;'. Vous pouvez également définir les propriétés de bordure pour chaque côté individuellement en utilisant 'border-top', 'border-right', 'border-bottom' et 'border-left'.

Marge

La marge est l'espace entre le bord d'un élément et les éléments qui l'entourent. Vous pouvez définir la marge de tous les côtés à la fois en utilisant la propriété 'margin', ou vous pouvez définir chaque côté individuellement en utilisant 'margin-top', 'margin-right', 'margin-bottom' et 'margin-left'. < /p>

Par exemple, si vous souhaitez ajouter une marge de 10 px en haut d'un élément, vous utiliserez 'margin-top: 10px;'. Si vous souhaitez ajouter une marge de 10 px sur tous les côtés, vous utiliserez « marge : 10 px ; ». La marge est transparente, donc tout ce qui se trouve derrière l'élément sera visible à travers elle.

Comprendre le modèle Box est essentiel pour pouvoir créer des mises en page complexes et réactives. C'est l'une des premières choses que vous devriez apprendre lorsque vous débutez avec CSS, et ce sera un outil précieux dans votre arsenal en tant que développeur front-end.