Propriétés de boîte et de bordure de feuilles de style en cascade (CSS) - nuls

Avec les propriétés de la boîte, vous pouvez placer des objets stylés n'importe où dans la fenêtre du navigateur, positionner les objets par rapport aux autres objets de la page et appliquer le des règles de style de remplissage et de marge de manière sélective à l'un ou à l'ensemble des quatre côtés de l'objet stylé, tels que gauche et bas ou haut, gauche et droite.

Lorsque vous ne stylisez pas les quatre côtés, veillez à ajouter des valeurs 0 aux côtés qui ne doivent pas contenir de valeurs, plutôt que de les laisser vides.

width / height: utilisez les attributs width et height pour définir les dimensions d'un objet ou d'un conteneur, tel qu'une table, une cellule de tableau ou un calque. Définissez les attributs sur auto pour forcer la taille de l'objet à correspondre au contenu de l'objet, ou entrez une valeur, positive ou négative, en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs) ou% (pourcentage).

#rings {height: auto; width: 475px;}

float: utilisez ce style pour contrôler le côté (gauche, droite ou aucun) sur lequel les autres objets vont flotter autour de l'objet stylé.

. saleitems {float: right;}

clear: Souvent utilisé en conjonction avec la propriété float, cet attribut de style contrôle si d'autres objets peuvent apparaître à côté de l'objet stylé. Les variables pour cet attribut incluent left, right, both et none. Par exemple, lorsqu'un calque apparaît sur le côté d'un objet avec le côté vide spécifié, cet objet est envoyé à la zone située en dessous de la couche.

. news {clear: both;}

padding: Cette propriété est comme la marge, seulement avec le remplissage, vous appliquez un espace supplémentaire entre l'objet stylisé et toute bordure qui l'entoure, comme avec une phrase ou un mot dans une cellule de tableau. Définissez la taille de remplissage sur les côtés gauche, droit, supérieur et / ou inférieur en utilisant une valeur, positive ou négative, en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage).

Lorsque des tailles uniformes sont appliquées aux quatre côtés de l'objet stylé, une seule valeur, comme dans padding: 10px;, doit être répertorié dans la déclaration. Sinon, spécifiez des valeurs pour les quatre côtés:

. sidebarimage {padding: 10px 0px 10px 0px;}

margin: Utilisez la propriété margin pour ajouter ou soustraire un espace supplémentaire entre le bord de la page (ou le conteneur parent) et l'objet en cours de style, comme la zone entourant un mot ou un calque. Définissez la taille de la marge à gauche, à droite, en haut et / ou en bas en utilisant n'importe quelle valeur, positive ou négative, en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage).

Vous pouvez également utiliser la valeur automatique des deux côtés d'un objet stylé pour centrer l'objet dans son conteneur parent. Lorsque des valeurs uniformes sont appliquées aux quatre côtés, une seule valeur doit être répertoriée dans la déclaration. Sinon, spécifiez des valeurs pour les quatre côtés:

#contact {margin: 0px auto 0px auto;}

Les propriétés de bordure définissent la couleur, le style et la largeur des bordures autour de n'importe quel objet stylé. Parce que les frontières peuvent aller sur les quatre côtés d'un objet, chaque côté peut avoir des attributs de bordure totalement différents! Pour de meilleurs résultats, comme pour les marges et le remplissage, assurez-vous d'ajouter un 0 ou aucun à toute propriété latérale n'ayant pas de style:

. tablecell {border-top: 0px none; bordure-droite: 2px pointillé # 069; border-bottom: 1px solide # 09C; border-left: 2px dotted # 069;}

style: vous pouvez spécifier des bordures dans l'un des styles suivants: plein, pointillé, pointillé, double, rainure, rainure, encart, début ou aucun. Le style doit être spécifié en conjonction avec la couleur et la largeur.

. tablecell {border: 2px en pointillés # 330066;}

width: Vous pouvez définir des options pour l'épaisseur de la bordure sur thin, medium ou thick. Ou, pour des mesures plus précises, utilisez n'importe quelle valeur en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage Spécifiez la largeur avec la couleur et le style de bordure.

. tablecell {border: 1px pointillé # 660033;}

color: Pour coloriser l'attribut border, spécifiez la valeur hexadécimale de la couleur souhaitée et assurez-vous d'inclure le symbole numérique (#) avant la valeur hexadécimale, ainsi qu'un type de style et une largeur pour la bordure.

. tablecell {border: 5px solid # 003366 <;}