Home >Web Front-end >CSS Tutorial >How to use css margin property? css margin property usage tutorial
How to use css margin property? css margin property usage tutorial
- 云罗郡主Original
- 2018-11-07 14:14:128517browse
In css, there is an important attribute margin. Many people don’t know what the css margin attribute is? How to use it? Here is a summary of the tutorial on how to use the css margin property.
Margin is the abbreviation of CSS for all CSS margin properties in a statement. It is precisely because margin controls the distance between block-level elements in CSS, so Both are not visible. [Recommended learning: CSS3 tutorial]
1: How to use the css margin attribute
The margin attribute contains many attributes, as shown below:
margin left: It means setting the distance from the left inner margin;
margin top: It means setting the block distance of the top element;
margin right: It means setting the distance Right element block distance;
margin bottom: means setting the bottom block distance
2: css margin attribute usage tutorial
1.margin left Usage:
margin left: 50px; The syntax is followed by a number or percentage. This syntax means 50 pixels from the left element block, or 50% of the distance from the element.
In order to observe the example, we use two boxes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin-left实例 www.divcss5.com</title>
<style>
.php-a,.php-b
{float:left; width:150px; height:120px; border:1px solid #F00}
.php-b{ margin-left:50px}
.php-c{ margin-left:50px}
</style>
</head>
<body>
<div class="php-a"></div>
<div class="php-b"></div>
</body>
</html>We can change the value and observe the changes, but the effect is the position and size of the left spacing of the element.
2. The usage of margin right is exactly the opposite of margin left, which is defined as the number of pixels away from the right element.
3.margin top: 50px, the syntax is followed by a number, which means the top spacing is 50 pixels, or it can also be expressed as a percentage.
4. The usage of margin bottom is similar to the usage of margin top, and the directions are opposite.
If we want to use margin:10px to represent the top, bottom, left and right, we have to think about the clockwise rotation of margin. [Recommended reading: margin: Detailed explanation of the usage of the auto attribute]
The above is how to use the css margin attribute? A complete introduction to the usage tutorial of the css margin attribute. If you want to know more about CSS3 video tutorials, please pay attention to the PHP Chinese website.
The above is the detailed content of How to use css margin property? css margin property usage tutorial. For more information, please follow other related articles on the PHP Chinese website!