How to set css top margin-CSS Tutorial-php.cn

How to set css top margin

青灯夜游

Release： 2023-01-07 11:43:39

Original

12787 people have browsed it

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.

How to set css top margin

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>

Copy after login

Rendering:

How to set css top margin

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>

Copy after login

Rendering:

How to set css top margin

(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!