recherche

Maison >interface Web >tutoriel CSS >Comment effacer le propre espacement de la balise p en CSS

Comment effacer le propre espacement de la balise p en CSS

青灯夜游
青灯夜游original
2021-11-09 11:44:515107parcourir

En CSS, vous pouvez effacer la balise p elle-même en définissant le style "p {padding:0;margin: 0;-webkit-margin-before: 0;-webkit-margin-after: 0;}" sur p espacement.

Comment effacer le propre espacement de la balise p en CSS

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

En HTML, chaque balise a un style par défaut. Par exemple, la balise p elle-même a un espacement : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {
border: 1px solid red;
}
</style>
</head>
<body>
<p>hello</p>
<p>hello</p>
</body>
</html>

Comment effacer le propre espacement de la balise p en CSS

Alors, comment supprimer l'espacement de la balise p elle-même ?

Nous pouvons utiliser les attributs margin et padding et définir leurs valeurs​​à 0 : 

p {
	padding:0;
	margin: 0;
}

De cette façon, l'espacement de la balise p peut être effacé :

Comment effacer le propre espacement de la balise p en CSS

Mais dans certains navigateurs, quand même, p a toujours une marge haut et bas, car

Comment effacer le propre espacement de la balise p en CSS

ici-webkit-margin-after和 -webkit-margin-before a 1rem, il est donc préférable de les définir tous les deux sur 0

-webkit-margin-before: 0;
-webkit-margin-after: 0;

(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：12 astuces CSS à mettre en favoris ! !Article suivant：12 astuces CSS à mettre en favoris ! !

Articles Liés

Voir plus