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.

307 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
4 297 vues
Le langage CSS
Le CSS permet de concevoir le design de votre site web. Le CSS agit sur des éléments HTML.On peut intégrer le CSS de deux façons :Directement sur les éléments de votre HTML,Mettre le...
Créer son site
4 144 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
259 vues
Portée des variables (variables locales et globales)
La portée des variables en PHP fait référence à la visibilité et à l'accès des variables à différents endroits dans un script PHP. Il existe deux types principaux de portée des variables :...
PHP
2 449 vues
Supprimer un ami
Nous allons repartir sur notre page voir_profil.php afin de compléter le code ci-dessous.<form method="post">   <?php     if(!isset($relation['id'])){   ?>  ...
Créer son site
1 420 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
175 vues
Fonctions anonymes et fonctions fléchées
Fonctions Anonymes et Fonctions Fléchées en JavaScript1. Fonctions Anonymes :Une fonction anonyme est une fonction définie sans nom. Elles sont souvent utilisées comme fonctions de rappel...
JS
3 964 vues
Ajouter des commentaires
Poster des commentaires sur vos articlesNous allons reprendre la page voir_article.php afin d'ajouter un formulaire qui permettra d'écrire un commentaire pour participer à...
Créer son site
2 930 vues
Voir le profil d'un utilisateur en PHP
Maintenant que nous avons la liste des utilisateurs, nous allons créer une nouvelle page PHP afin de visiter le profil d'un membre dynamiquement.Pour cela nous allons passer dans l'URL l'identifiant...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...