Home > Article > Web Front-end > How to set left margin in css
How to set left margin in css
- 青灯夜游Original
- 2021-05-12 16:10:5223562browse
How to set the left margin in css: 1. Use the margin-left attribute to set the left margin of the element. The syntax format is "margin-left:margin value;"; 2. Use the padding-left attribute. You can set the left padding of the element with the syntax format "padding-left:margin value;".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
1. Use margin-left to set the left margin
The margin-left attribute sets the left margin of the element.
Note: Negative values are allowed.
Attribute value:
| Value | Description |
|---|---|
| auto | The left margin set by the browser. |
| length | Define a fixed left margin. The default value is 0. |
| % | Defines the left margin as a percentage based on the total width of the parent object. |
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p.leftmargin {
margin-left: 1cm;
}
</style>
</head>
<body>
<p>这个段落没有指定左边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>
2. Use padding-left to set the left inner margin
Thepadding-left attribute sets the left padding of an element.
Note: Negative values are not allowed.
Attribute value:
| Value | Description |
|---|---|
| length | Specifies a fixed left padding value in specific units, such as pixels, centimeters, etc. The default value is 0px. |
| % | Defines a percentage left padding based on the width of the parent element. This value will not work as expected in all browsers. |
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p.leftpadding {
margin-left: 1cm;
}
</style>
</head>
<body>
<p>这个段落没有指定左边距。</p>
<p class="leftpadding">这个段落带有指定的左内边距。</p>
</body>
</html>
Learning video sharing: css video tutorial
The above is the detailed content of How to set left margin in css. For more information, please follow other related articles on the PHP Chinese website!