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.

584 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
540 vues
Sélection d'éléments HTML
Sélection d'Éléments HTML en JavaScriptLa sélection d'éléments HTML est une opération fondamentale en JavaScript. Cela permet d'interagir avec les éléments de la page web, de modifier leur...
JS
356 vues
Positionnement statique, relatif, absolu et fixe
Positionnement Statique, Relatif, Absolu et Fixe en CSSEn CSS, le positionnement des éléments peut être contrôlé en utilisant différentes propriétés. Les quatre types de positionnement les...
CSS
3 719 vues
Créer un topic
Créer un topicDans notre dossier **f_forum**, nous allons créer une nouvelle page creer_topic.php. Cette page permettra à vos utilisateurs de pouvoir créer un topic afin de demande de l'aide,...
Créer son site
4 516 vues
L'expression if ... else - PHP
Lorsque vous écrivez votre code, il vous arrive souvent de vouloir effectuer des actions différentes en fonction de différentes conditions. C'est à ce moment que l'instruction if et else va vous...
285 vues
Modification du contenu et des styles
Modification du Contenu et des Styles des Éléments HTML en JavaScriptLa modification du contenu et des styles des éléments HTML est une tâche courante en développement web. Cela permet de...
JS
2 031 vues
Utilisation de l'instruction SQL INSERT INTO pour ajouter des données à une table
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
18 282 vues
Créer un profil PHP
Après avoir créé notre page de connexion et notre page d'inscription il est temps de créer un profil pour votre utilisateur !La page profil permettra plusieurs choses ! D'éditer ses informations...
Créer son site
3 328 vues
Formulaire d'inscription en PHP (2/2)
Dans cette deuxième partie nous allons compléter et sécuriser notre formulaire avec différentes conditions.Par exemple nous allons utiliser la function crypt de PHP.Exemple :<?php ...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...