How to set the top margin in css: 1. Use the margin-top attribute to set the top margin of the element; 2. Use the padding-top attribute to set the top margin of the element. The margin-top and padding-top properties accept any length unit, which can be pixels, inches, millimeters, or em.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the top margin in css: Use the margin-top attribute
The margin-top attribute can set the top margin of the element
The empty space surrounding the element's border is the margin. Setting margins creates additional "white space" outside the element.
Margin properties are affected by any length unit (can be pixels, inches, millimeters, or em.), percentage values, or even negative values.
Attribute value:
| Value | Description |
|---|---|
| auto | The top margin set by the browser. |
| length | Define a fixed top margin. The default value is 0. |
| % | Defines the top margin as a percentage based on the total width of the parent object. |
| inherit | Specifies that the top margin should be inherited from the parent element. |
Example:
<!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>Rendering:
css settings Method 2 for top margin: Use the padding-top attribute
The padding-top attribute can set the top padding of the element
The padding of the element is between the border and the content Between areas is the blank area between the element border and the element content
The padding property accepts length values or percentage values, but negative values are not allowed.
Attribute value:
| Value | Description |
|---|---|
| length | specifies a fixed top padding value in specific units, such as pixels, centimeters, etc. The default value is 0px. |
| % | Defines top padding as a percentage based on the width of the parent element. This value will not work as expected in all browsers. |
| inherit | Specifies that the top padding should be inherited from the parent element. |
Example:
<!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>Rendering:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set css top margin. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
