The Margin property in CSS


The previous CSS lesson Taimienphi.vn introduced you to the border attribute in CSS, in the next lesson below, Taimienphi.vn will introduce you to the Margin properties in CSS.


The Margin property in CSS is used to create spaces around the elements, outside the borders. Refer to the following CSS lesson of Taimienphi.vn to learn about the Margin properties in CSS.

The Margin property in CSS

Table of Contents:
1. Margin attribute in CSS
1.1. Attribute Margin attribute
1.2. Auto value
1.3. The value of inherit
1.4. Margin Collapse in CSS
1.5. Margin properties in CSS

1. Margin attribute in CSS

CSS includes properties for specifying and aligning each part of an element:

margin-top
margin-right
margin-bottom
margin-left

All margin properties may include values:

auto: Calculates the alignment in the browser.

– length: Align text in px, pt, cm, … format.

-%: aligns to% the width of the containing element.

– inherit: Indication must be inherited from the parent element.

Tips: Negative values ​​are also allowed.

For example: In the example below, align 4 different margins for the 4 parts of the element p:

crystal margin in css

The output will look like the following:

margin fine in css 2

1.1. Attribute Margin attribute

To shorten the code, we can declare all margin properties in a single attribute.

Properties margin Shorten, declare the following properties:

margin-top

margin-right

margin-bottom

margin-left

Inside:

– If attributes margin There are 4 values:

margin: 25px 50px 75px 100px;

Top margin is 25px

Right margin is 50px

Bottom margin is 75px

The left margin is 100px

Example 1:

crystal margin in css 3

The output will look like the following:

margin fine in css 4

– If attributes margin There are 3 values:

margin: 25px 50px 75px;

Top margin is 25px

Right and left margins are 50px

Bottom margin is 75px

Example 2:

crystal margin in css 5

The output will look like the following:

margin fine in css 6

– If attributes margin There are 2 values:

margin: 25px 50px;

Top and bottom margins are 25px

Right and left margins are 50px

Example 3:

margin fine in css 7

The output will look like the following:

margin fine in css 8

– If attributes margin has 1 value:

margin: 25px;

The 4 margin value is 25px.

Example 4:

margin fine in css 9

The output will look like the following:

margin fine in css 10

1.2. Auto value

We can set the value of the margin property to auto to automatically align among elements inside its container.

That element will apply the specified width and the remaining space will be divided equally between left and right margins.

For example:

gain margin in css 11

The output will look like the following:

margin fine in css 12

1.3. The value of inherit

In the following example, the left margin of the element (p class = “ex1”) is allowed to inherit from the parent element (div).

For example:

gain margin in css 13

The output will look like the following:

margin margin in css 14

1.4. Margin Collapse in CSS

Sometimes we can combine the top and bottom margins of a single element by taking the value calculated from the sum of 2 margins.

Note: This method only applies to the top and bottom margins, not to the left and right margins.

For example:

margin fine in css 15

The output will look like the following:

margin margin in css 16

In the example above, the bottom margin of the element h1 is 50px and the top margin of the element p is 20px.

The total value of the two margins is 70 px (50px + 20px), but because the margin collapse attribute combines the margins to 1, the actual margin value is 50px.

1.5. Margin properties in CSS

The following is a list of the Margin properties in CSS:

margin margin in css 17

https://thuthuat.taimienphi.vn/thuoc-tinh-margin-in-css-50600n.aspx
The CSS lesson above Taimienphi.vn has just introduced you to the Margin properties in CSS. In the next lessons, Taimienphi.vn will introduce you to the format attribute list in CSS Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *