Le modèle Boite CSS
L'utilisation
de css pour créer des mises en page plutôt que de les utiliser pour formater
votre texte est complexe. Vous seriez bien conseillé de commencer avec un
design ready-made à partir d'un site tel que www.opendesigns.org ,c’est un site en anglais, plutôt que de
concevoir votre propre site à partir de zéro. Mais si vous voulez en savoir plus sur
les subtilités de CSS pour la mise en page, il y a beaucoup de bons livres et de
ressources en ligne disponibles. Une recherche Google pour des termes tels que
«css tutorial» ou «formation css» vous aidera à démarrer.
L'un
des concepts les plus importants dans la mise en page basé sur CSS est quelque
chose appelé le modèle de boîte. Il explique comment le remplissage,
l'espacement, la justification (gauche, droite, centrée, etc.) et les marges
interagissent pour affecter la position finale d'un élément sur une page.
Pour
comprendre le principe des marges intérieures et extérieures ? Examinez le
modèle de boîte CSS suivant. Il illustre la relation entre les différentes
propriétés de mise en page CSS et les éléments HTML auxquels elles se
rapportent.
Explication
des différentes parties:
Contenu : Le
contenu de la zone où le texte et les images apparaissent
La marge
intérieur (padding) : Efface une zone autour du contenu. Cette marge est transparente
Bordure
(border) : Une bordure qui contourne le padding et le contenu
Marge
extérieur (margin) : Efface une zone située à l'extérieur de
la frontière. La marge est transparente
Le
modèle de boîte nous permet d'ajouter une bordure autour des éléments, et de
définir l'espace entre les éléments.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width:
300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2> Démonstration du
modèle de boîte </h2>
<p> Le modèle de boîte CSS
est essentiellement une boîte qui enveloppe chaque élément HTML. Il se compose
de: bordures, marges extérieures et intérieures et le contenu réel. </p>
<div>Ce texte est le
contenu réel de la boîte. Nous avons ajouté un padding de 25px, une marge de
25px et une bordure verte de 25px. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Afin de définir la largeur et la
hauteur d'un élément correctement dans tous les navigateurs, vous devez savoir
comment fonctionne le modèle de boîte.
La largeur totale d'un élément
doit être calculée comme suit:
Largeur
de l'élément total =Width + padding-left + padding-right + border-left +
border-right + margin-left + margi-right
La hauteur totale d'un élément
doit être calculée comme suit:
Hauteur
totale de l'élément = height + padding-top + padding-bottom + border-top + border-bottom
+ margin-top + margin-bottom.
Dans cet exemple :
La largeur de l’élément
total = 300px+25px+25px+25px+25px+25px+25px
La largeur de l’élément total = 450px
Remarque pour
l'ancien IE: Internet Explorer 8 et versions antérieures, incluent le
remplissage et la bordure dans la propriété width. Pour résoudre ce problème,
ajoutez un <! DOCTYPE html> à la page HTML
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment