Home > Developer > CSS

Detailed description of the attributes of CSS margin

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In this document, we translate margin into margin or padding (reference margin in this article ). It is the basic attribute of the element box model.
I. Basic features of margin
The margin attributes include margin-top, margin-right, margin-bottom, margin-left, and margin. They can be used to set the margin area of a box. The property margin can be used to set the four-sided margin of the box at the same time, while other margin attributes can only set their own margins.
The margin attribute can be applied to almost all elements except the elements of the table display type (excluding table-caption, table and inline-table, in addition, the vertical margin does not work for non-replaced inline elements.
Some may be confused about the non-replaced element. Non-replacement elements are not clearly defined in W3C, but we can literally understand that non-replacement elements correspond to replaced elements ), that is to say, if we understand the meaning of the replacement element, we can understand the non-replacement element. Replacement element, which is defined in W3C:
"An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet"
From the definition, we can understand that replaced elements mainly refer to elements such as img, input, textarea, select, and object which have CSS to format the appearance range by default. We can see that non-replaced elements are not only replacement elements such as img, input, textarea, select, and object.
Margin is always transparent.
II. Basic syntax of margin
The value types of margin-width include: auto | length | percentage.
Percentage: percentage is the containing block of the applied box (note: the containing block of an element is a rectangle generated by the box (es) generated by this element in the computing position and referenced by the hour, for details, refer to: Containing Block. The same applies to margin-top and margin-bottom.
The default value of margin is 0, and margin supports negative values.
As mentioned above, the property margin can be used to specify the four-sided margin of the box at the same time. If the property margin has four values, the values will act on the four sides in the order of top-right-bottom-left, that is, starting from the top of the element and centering around the element clockwise. The expression is as follows:
Margin: top right bottom left;

Here is an example:

Sample Code [www.dedecms.com] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> Untitled Document </title>
<Style type = "text/css">
Div {width: 200px; height: 200px; background: # ccc ;}
</Style>
</Head>
<Body>
<Div> The Value Types of margin-width include: auto | length | percentage </div>
</Body>
</Html>
The code above is very simple. To make it easier for us to see the effect, we set the width, height, and background color for the div.
Now we add the margin attribute to the div style, for example:

Sample Code [www.dedecms.com] margin:-10px 20px-30px 40px;
What is the parsing logic of margin at this time? First, we need to understand the relationship between the div and the surrounding elements. The div is not connected to any element. In this case, the div containing block is the block box generated by the body. Based on the reference line principle described above, the left margin of the div uses the left side of the content of the ining block as the reference line, and the left side of the content of the body as the reference line to horizontally shift to the right, the displacement is 40 px. Similarly, the top margin uses the content of the body as the reference line to vertically shift up to 10px (the negative value is opposite to the positive value ), the bottom margin follows the current div's borer bottom (the div has been moved through the top margin) vertical upward displacement of 30px (at this time, margin will not change the physical size of the box's border, but it will change the logic size of the box, that is, the elements referenced below the margin of this box, not starting from the physical location of the box, but starting from the logical location ), the right margin follows the current right margin of the div's borer (at this time, the div has passed the left margin shift) and horizontally shifts 20 px to the right. A friend may ask you how the analysis sequence is different from that in the margin expression? If the analysis results are the same according to the order in the margin expression, the analysis is not performed in the order of the expression for better understanding.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
description of dell laptop description of sunrise description of visual studio attributes of class attributes of property description of core iphone description of features
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More