Comment définir la marge supérieure CSS-tutoriel CSS-php.cn

Comment définir la marge supérieure CSS

青灯夜游

Libérer： 2023-01-07 11:43:39

original

12637 Les gens l'ont consulté

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.

Comment définir la marge supérieure CSS

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>

Copier après la connexion

Rendu :

Comment définir la marge supérieure CSS

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>

Copier après la connexion

Rendu :

Comment définir la marge supérieure CSS