recherche

Maison  >  Article  >  interface Web  >  Comment définir les marges en CSS

Comment définir les marges en CSS

青灯夜游
青灯夜游original
2021-05-13 15:43:5612307parcourir

Comment définir les marges en CSS : 1. Utilisez l'attribut margin pour définir toutes les marges de l'élément dans une seule instruction. 2. Utilisez margin-top, margin-bottom, margin-left et margin-right ; attributs, définissez respectivement les marges supérieure, inférieure, gauche et droite de l'élément.

Comment définir les marges en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

1. Utilisez l'attribut margin

attribut raccourci margin pour définir tous les attributs de marge dans une seule instruction. Cet attribut peut avoir de 1 à 4 valeurs.

Exemple :

margin:10px 5px 15px 20px;

  • La marge supérieure est de 10px

  • La marge de droite est de 5px

  • La marge inférieure est de 15px

  • La marge gauche est de 20px

margin:10px 5px 15px;

  • La marge supérieure est 10px

  • Les marges droite et gauche sont de 5px

  • La marge inférieure est de 15px

margin:10px 5px;

  • Les marges supérieure et inférieure sont de 10px

  • Les marges droite et gauche sont de 5px

margin:10px;

  • Les quatre Chaque marge mesure 10px

2 Utilisez les attributs margin-top, margin-bottom, margin-left et margin-right

    .

  • margin-top : Définit la marge supérieure de l'élément

  • margin-bottom : Définit la marge inférieure de l'élément

  • margin-left : Définir la marge gauche de l'élément

  • margin-right : Définir la marge droite de l'élément

Exemple : 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			div{
				border: 1px solid red;
			}
			.a1{
				margin-top: 10px;
			}
			.a2{
				margin-bottom: 10px;
			}
			.a3{
				margin-left: 10px;
			}
			.a4{
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div>测试文本</div>
		<div class="a1">测试文本</div>
		<div class="a2">测试文本</div>
		<div class="a3">测试文本</div>
		<div class="a4">测试文本</div>
		<div>测试文本</div>
	</body>

</html>

Rendu :

Comment définir les marges en CSS

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment ajouter du CSS dans jqueryArticle suivant：Comment ajouter du CSS dans jquery

Articles Liés

Voir plus