Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir la distance entre les balises CSS et les balises

青灯夜游
Libérer: 2023-01-03 09:25:29
original
9185 Les gens l'ont consulté

En CSS, vous pouvez utiliser les attributs de série de marge pour définir la distance entre les étiquettes. L'attribut margin est utilisé pour définir la marge extérieure d'un élément, qui est la distance entre sa propre bordure et la bordure d'un autre conteneur (c'est-à-dire la distance extérieure du conteneur). C'est la distance entre les éléments d'étiquette et les éléments d'étiquette. .

Comment définir la distance entre les balises CSS et les balises

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

En CSS, vous pouvez utiliser les attributs de série de marge pour définir la distance entre les étiquettes.

  • margin : définit toutes les propriétés de marge dans une seule instruction

  • 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

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

La marge fait référence à la distance entre sa propre bordure et la bordure d'un autre conteneur, c'est-à-dire la distance extérieure du conteneur, qui sépare l'élément de l'espacement entre les éléments.

[Tutoriel recommandé : Tutoriel vidéo CSS]

Exemple :

Créer un nouveau fichier html et un nouveau nom il test.html, utilisé pour expliquer comment ajuster la distance entre deux balises p en utilisant CSS.

Dans le fichier test.html, utilisez la balise div pour créer un module et définissez sa classe sur tzpp. Dans la balise div, utilisez la balise p pour créer deux lignes de texte à tester.

Comment définir la distance entre les balises CSS et les balises

Dans le fichier test.html, écrivez la balise être écrit à l'intérieur de l'étiquette.

Dans la balise css, utilisez "*" pour initialiser les marges intérieures et extérieures de tous les éléments html de la page à 0, définissez la largeur de l'élément div avec le nom de classe tzpp à 200px ; en dessous du div à 1px gray Pour la bordure, utilisez l'attribut margin-top pour définir la distance entre les deux balises p à 20px.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.tzpp{
				width: 200px;
			}
			.tzpp p{
				line-height: 30px;
				border: 1px solid #ccc;
				margin-top:20px ;
			}
		</style>
	</head>

	<body>
		<div class="tzpp">
		<p>这是第一行测试文本。</p>
		<p>这是第二行测试文本。</p>
		</div>
	</body>

</html>
Copier après la connexion

Ouvrez le fichier test.html dans le navigateur pour vérifier l'effet.

Comment définir la distance entre les balises CSS et les balises

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal