Padding,margin,border properties of the "Go" graphical CSS (detailed introduction and illustration)

The organization recommends that all the images on the Web page be placed in a box where the designer can control the properties of the box by creating a definition that includes paragraphs, lists, headings, pictures, and layers. The box model mainly defines four regions: content, Border spacing (padding), Border (border), and margin (margin). For beginners, it is often unclear the level, relationship and interaction between margin,background-color,background-image,padding,content,border. Here is a box model of 3D, hoping to facilitate your understanding and memory.

• Margin: A blank left outside the border of a layer
• Background-color: Background color
• Background-image: Background image
• padding: white space between layers ' borders and content of layers
• Border: Border
• Content: Contents

Padding, margin two important attributes of the detailed introduction and illustration

This article will tell you about the key-box model ofHTML and CSS. The key to understanding the box model is the margin and padding attributes, and the correct understanding of the two properties is the key to learning CSS layouts.

Note : Why not translate margin and padding? Reason one, there is no corresponding word in Chinese; Reason two: Even if there is such a word, because in the writing of CSS code, must use margin and padding, if we always use Chinese words instead of its interpretation, to the practical application of the concept of easy to confuse the margin and padding.

If there is a bit of HTML base, you should know some basic elements(element), such as P, H1~h6, BR, Div, LI, ul, IMG and so on. If you subdivide these elements, you can classify them as top-level (top-level) elements, block-level (block-level) elements, and inline (inline) elements, respectively.

1. Block-level element: Refers to the ability to exist independently, the general block-level elements separated by a newline (such as a paragraph after the end of another line). Commonly used block-level elements include: P, H1~h6, Div, UL and so on;

2. Inline element: Refers to the presence of other block-level elements, which are displayed immediately between the associated elements, without wrapping. Commonly used inline elements include: IMG, span, Li, BR, etc.;

3. Top-level element: including HTML, body, frameset, performance such as Block-level element, belongs to the advanced block-level element.

Block-level elements are the primary and key elements that make up an HTML, and any block-level element can be interpreted with the box model.

Box Model: Any block-level element is composed of content (contents), padding, background (including background color and picture), border (border), margin five parts. The stereoscopic figure is as follows (Fig. 1):

The stereoscopic chart is quoted from: http://www.cncfan.com/url.asp?url=http://www.hicksdesign.co.uk/(under the Creative Commons License)

The floor plan is as follows (Fig. 2):

According to the above two figures, I believe you will have an intuitive understanding of box model.

The margin and padding properties are described below:

1. Margin: Includes Margin-top, Margin-right, Margin-bottom, Margin-left, controls the distance between block-level elements, which are transparent and invisible to fig. 2 shows the upper right bottom left margin value is 40px, so the code is:

margin-top:40px;

margin-right:40px;

margin-bottom:40px;

margin-left:40px;

According to the clockwise rule of the upper, right, bottom, left, abbreviated to

margin:40px 40px 40px 40px;

For easy memory, please refer to:

When up and down, margin values are consistent, can be abbreviated as:

margin:40px 40px;

The previous 40px represents the up and down margin value, and the next 40px represents the left and right margin values.

When the upper and lower margin values are consistent, can be abbreviated as:

margin:40px;

2. Padding: Includes Padding-top, Padding-right, Padding-bottom, Padding-left, control block-level elements within, the distance between content and border, its code, For shorthand, refer to the notation for the margin attribute.

At this point, we have a basic understanding of the basic usage of the margin and padding properties. However, in practical applications, there are always some things that make you elusive, and they are more or less related to margin.

Note : When you want the content of two elements to be separated vertically (vertically), you can choose either Padding-top/bottom or Margin-top/bottom. Again this jorux suggest you try to use Padding-top/bottom to achieve your goal, this is because there is collapsing margins (folding margins) in the CSS.

collapsing margins: The margins folding phenomenon exists only in adjacent or subordinate elements, in a vertical margin. Text descriptions can be confusing, with an example to illustrate the margin-collapsing phenomenon.

Example : Write the following code between the <body></body> in the HTML file:

 <  div  id  = "Id1″  >  Span style= "Color:rgb (0, 0, 255); ><  h1  id   >  Margins of ID1 and ID2 collapse Vertically.<  br  />  The element ID1 is folded vertically with the margins of the ID2. </ h1  </ div  

Write to a CSS file that is in its outreach:

* {padding:0;margin:0; }#ID1{Background-color:#333;Color:#FFF;Margin-top:10px;Margin-bottom:10px; }#ID2{Font:normal 14px/1.5 Verdana, Sans-serif;Margin-top:30px;Margin-bottom:30px;Border:1px solid #F00; }

Code Explanation:

1. In the HTML written code representation, insert IDs in HTML two block-level elements Div, H1, respectively, ID1 and ID2;

2. *{padding:0; margin:0;}: The default element padding and margin values of the browser are zeroed;

3. #ID1 {...}: the background color of the element div with ID ID1 is #333, the font color is #fff, Margin-top/bottom is 10px;

4. #ID2 {...}: H1 the font size of the element with ID ID2 to 14px, Verdana font, line height to 150% of the font height, normal thickness. Margin-top/bottom is 30px, the border is 1px wide, red solid line.

Based on the above explanation, we should have the following effect (Fig. 3):

That is, the margin-top/bottom=ab=ef=10px of ID1;

The margin-top/bottom=bc=de=30px of ID2;

But with the browser open HTML file, but get Example4 effect, such as (Fig. 4):

That is ab=cd=30px, ID1 's margin-top/bottom=10px is folded , and the ID1 due margin black background is folded and disappeared.

Why Folding : This is caused by the fact that we do not declare the height (height) of the element div with ID ID1 in CSS, so its height is set to auto. Once the value is set to Auto, Then the browser will consider its height as a child element ID2 the distance between the Border-top to Border-bottom, which is fig. The length of the BC in 4, so the Margin-top/bottom (30px) of the child element ID2 extends beyond the parent element ID1, and the fig appears. 4 The white space between AB and CD. Therefore, the parent element ID1 the Margin-top/bottom factor element of the "cheating" and is folded away.

How to solve the folding problem : Perhaps the first thought of the solution is based on the cause of the collapse-auto, to solve the problem. However, in the actual operation, some elements such as Div, H1, p, etc., we can not know in advance how high it is, so in the CSS file is not routinely by declaring the height of the element to solve the collapse problem.

We need to add the following code to the CSS file:

#ID1{Background-color:#333;Color:#FFF;Margin-top:10px;Margin-bottom:10px;Padding-top:1px;Padding-bottom:1px; }or: #ID1{Background-color:#333;Color:#FFF;Margin-top:10px;Margin-bottom:10px;Border-top:1px solid #333;Border-bottom:1px solid #333; }

By adding the above code, you can make the browser recalculate the height of the ID1 so that it is the distance between the margin-top/bottom outer edge (outer top/bottom) of the child element ID2, which is fig. The distance of be in 3.

Additional:

The definition of the number of parameters in the Padding property in CSS, for example:

body {padding:20px;}
body {padding:20px 30px;}
Body {padding:20px 30px 10px;}
Body {padding:20px 30px 10px 20px;}

detailed description is as follows:
If only one is provided, it will be used for all four edges;
If two are supplied, the first one is used up-down and the second one is for left-right;
If three are supplied, the first one is used on, the second one is for left-right, and the third one is used for the next;
If you provide all four parameter values, the upper-right-bottom-left order is used for four-sided.
body {padding:36px;} 36px of patch margins on all sides of the object
body {padding:36px 24px;} Top and bottom patch margins of 36px, left and right side of the patch margin of 24px
Body {padding:36px 24px 18px;} The patch margins on the upper and lower sides are 36px and 18px respectively, and the patch margins on the left and right sides are 24px
Body {padding:36px 24px 18px 12px;}//Top, right, bottom, left patch margins are 36px, 24px, 18px, 12px, respectively

========================================================================================

Related information:

Http://www.divcss5.com/shili/s6.shtml

Http://www.divcss5.com/shili/s7.shtml