Maison > Article > interface Web > Comment définir la marge supérieure CSS
Comment définir la marge supérieure CSS
- 青灯夜游original
- 2021-07-15 16:50:2112569parcourir
Comment définir la marge supérieure en CSS : 1. Utilisez l'attribut margin-top pour définir la marge supérieure de l'élément ; 2. Utilisez l'attribut padding-top pour définir le remplissage supérieur de l'élément. Les propriétés margin-top et padding-top acceptent n'importe quelle unité de longueur, qui peut être des pixels, des pouces, des millimètres ou des em.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Méthode 1 pour définir la marge supérieure en CSS : Utilisez l'attribut margin-top
L'attribut margin-top peut définir la marge supérieure de l'élément
La zone vide entourant la bordure de l'élément est la marge extérieure. La définition des marges crée un « espace blanc » supplémentaire à l’extérieur de l’élément.
Les propriétés de marge sont affectées par n'importe quelle unité de longueur (peut être des pixels, des pouces, des millimètres ou des em.), des valeurs en pourcentage ou même des valeurs négatives.
Valeur d'attribut :
| 值 | 描述 |
|---|---|
| auto | 浏览器设置的上外边距。 |
| length | 定义固定的上外边距。默认值是 0。 |
| % | 定义基于父对象总宽度的百分比上外边距。 |
| inherit | 规定应该从父元素继承上外边距。 |
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>
</html>Rendu :
Méthode CSS pour définir la marge supérieure 2 : Utilisez l'attribut padding-top
attribut padding-top pour définir le haut de la marge de l'élément
Le remplissage d'un élément se situe entre la bordure et la zone de contenu. C'est la zone vide entre la bordure de l'élément et le contenu de l'élément
La propriété padding accepte une valeur de longueur ou une valeur de pourcentage, mais négative. les valeurs ne sont pas autorisées.
Valeur d'attribut :
| 值 | 描述 |
|---|---|
| length | 规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。 |
| inherit | 规定应该从父元素继承上内边距。 |
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:20%;}
</style>
</head>
<body>
<p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
<p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
<p class="padding2">这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。</p>
</body>
</html>Rendu :
(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!