CSS

Comprendre les concepts de marge, bordure, rembourrage et largeur/hauteur

Dans CSS, la mise en page des éléments est souvent influencée par quatre concepts clés : la marge, la bordure, le rembourrage et la largeur/hauteur. Comprendre ces concepts est essentiel pour créer des mises en page Web efficaces et esthétiques.


1. Marge (Margin) :


La marge d'un élément contrôle l'espace entre cet élément et les autres éléments adjacents. Vous pouvez définir la marge avec les propriétés margin-top, margin-right, margin-bottom et margin-left.


div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}


Dans cet exemple, une marge de 10 pixels est définie en haut, 20 pixels à droite, 30 pixels en bas et 40 pixels à gauche de l'élément <div>.


2. Bordure (Border) :


La bordure d'un élément est une ligne qui entoure le contenu et la marge de l'élément. Vous pouvez définir la bordure avec les propriétés border-width, border-style et border-color.


div {
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
}


Dans cet exemple, une bordure solide de 2 pixels avec une couleur noire est appliquée à l'élément <div>.


3. Rembourrage (Padding) :


Le rembourrage d'un élément est l'espace entre le contenu de l'élément et sa bordure. Vous pouvez définir le rembourrage avec les propriétés padding-top, padding-right, padding-bottom et padding-left.


div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}


Dans cet exemple, un rembourrage de 10 pixels est défini en haut, 20 pixels à droite, 30 pixels en bas et 40 pixels à gauche de l'élément <div>.


4. Largeur / hauteur (Width / Height) :


La largeur et la hauteur d'un élément déterminent sa taille sur la page. Vous pouvez définir la largeur et la hauteur avec les propriétés width et height.


div {
    width: 200px;
    height: 100px;
}


Dans cet exemple, la largeur de l'élément <div> est définie à 200 pixels et sa hauteur à 100 pixels.


5. Relation entre la Marge, la Bordure, le Rembourrage et la Largeur / Hauteur :


Il est important de comprendre que la marge, la bordure et le rembourrage affectent tous la taille totale de l'élément, en plus de la largeur et de la hauteur définies. Par exemple, si vous définissez une largeur de 200 pixels et un rembourrage de 20 pixels, la largeur totale de l'élément sera de 240 pixels.


En résumé, la compréhension des concepts de marge, bordure, rembourrage et largeur/hauteur en CSS est essentielle pour créer des mises en page Web précises et esthétiques. En utilisant ces concepts de manière judicieuse, vous pouvez contrôler efficacement l'apparence et le positionnement des éléments sur votre page.

375 vues
Posté le 26 mars 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
11 704 vues
Barre de recherche : Ajax
À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.Nous allons commencer par mettre cette...
Créer son site
2 088 vues
Demande d'amis en PHP (2/3)
Dans cette deuxième vidéos nous allons développer notre système de relation d’amitié afin de faire apparaître les bons boutons en fonction de l'état de la relation entre 2 membres.
Créer son site de rencontres
306 vues
Utilisation de styles en ligne avec l'attribut style
Utilisation de styles en ligne avec l'attribut styleL'attribut style permet de définir des styles CSS directement à l'intérieur des balises HTML. Cela permet d'appliquer des styles spécifiques à...
HTML
9 858 vues
Valider son compte avec un mail
Dans cet article nous allons développer un système qui permettra d'envoyer un mail à votre nouvel utilisateur avec une clé afin de confirmer son compte sur votre site.Pour commencer il faudra...
Créer son site
1 279 vues
Afficher plus de conversation
Dans cette avant-dernière vidéo sur la création d’une messagerie interne nous allons personnaliser rapidement la page pour afficher les conversations et nous allons également corriger /...
Créer son site de rencontres
315 vues
Déclaration de fonctions
Les fonctions en PHP sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code en le divisant en tâches plus petites et plus gérables. Voici...
PHP
308 vues
Boucles (for, while, do-while, foreach)
Les boucles en PHP permettent d'exécuter un bloc de code plusieurs fois, en fonction d'une condition spécifiée. Les principales boucles en PHP sont for, while, do-while et foreach. Voici un cours...
PHP
8 183 vues
Utilisation de Bootstrap
Maintenant que nous avons un site qui commence à être opérationnel, il va falloir que nous nous occupions du design de celui-ci pour le rendre plus agréable à voir pour vos...
Créer son site
Publicité
Cette pub permet au site de vivre ...