CSS padding outside the margin code detailed

This article mainly and everybody to share CSS inside margin and the margin, this article uses many examples and the code, hoped can help everybody.

Outer margin:

Margin left margin Margin-left: value | Autoauto: That is, the distance from this side furthest distance right margin: margin-right: value | Auto Top margin: margin-top: Value  can not be used here Auto bottom margin: margin-bottom: Value here also cannot use Auto margin compound 1:margin:0px (upper) 0px (right) 0px (lower) 0px (left) 2: margin:0px (upper) 0px (left and right) 0px (lower) 3:margin:0px (upper and lower margin) 0px (left-side margin) 4:margin:0px (upper and lower left margin is 0px)

code example:

<! DOCTYPE html>
Weibo three-column layout

Simple implementation of three-column <! page DOCTYPE html>

Inner margin

<! DOCTYPE html>
Background color style:

Background style: Background background color background-color: color value background picture background-image:url ("Picture path") Background picture tile backgroud-repeat:repeat-x (tile along x-axis) | Repeat-y (tile along the y-axis) | No-repeat (uneven) Background image positioning background-position:x YX axis: Support for left center right support percent Y axis: support for top center bottom support percent background picture size background-s Ize:x y | Cover | Containbackground: Compound notation background:background-color background-image background-position Background-repeat defining multiple Images Background:url ("timg.jpg") 0px 0px/100px 100px Repeat, url ("timg.jpg") 30% 30%/100px 100px No-repeat, url ("timg.jpg") 60% 60%/100px 100px no-repeat, gold URL (timg.jpg) 90% 90%/100px 100px no-repeat;
Pit of the outer margin:

Under a parent-child sibling structure, where the parent and child have a top margin set, if the parent does not have a border set, it can cause a collapse problem, that is, the parent box moves down a distance (the distance is the length of the top margin set by the child)
For example, there is no border code:

<! DOCTYPE html>
At this point the result:


When the border is set, the collapse problem will be solved perfectly, the collapse problem is the system's reason, we are only responsible for resolving the code:
<! DOCTYPE html>
At this point the result is running:


As you can see, the location of the parent reverts to the original location (the original location: that is, when the P2 was not created, the location of P1), the collapse problem was resolved.
Set the inner margin problem a p that can set the margin can also set the padding, when the inner margin is set, the box to expand the corresponding distance in this direction, such as the initial situation is:
<! DOCTYPE html>
Result: The result is the result of a width of 200 high 200, when no padding is set


Code to set the padding: The padding at the top edge of the border is set to 50

code example:

<! DOCTYPE html>
Result: the height of the outer box becomes 250, and the distance from the top edge of the top border of the outer box is 20+50=70 pixels


To set the padding at the same time and not want to change the size of the frame, you need to subtract the length of the padding you want to set from the height of the outer box, that is, 200-50=150, that is, the property of the outer box is set to 200 pixels wide, and the high 150 pixel code example
<! DOCTYPE html>
Result: The result at this time is restored to the outer box as a positive shape

If you also set the inner margin of the child's top border, you also need to subtract the height of the child from the corresponding distance code example: the height of the code is subtracted from the corresponding padding, and if the child border does not set the padding on the top edge of the border, the padding at the bottom of the border is set so that the border is not changed You still need to subtract the padding from the corresponding padding code to set the border Dingbian
<! DOCTYPE html>
Result: The results are not very obvious at this time


Another pit of the margin:

Peer structure (note is not a parent-child structure, the above pit is a parent-child structure), the outer margin of the conflict (that is, two peer p, one on top, one below, you set the margin is Magin-bottom, I also set the margin is (magin-top), At this point the two margins are conflicting, and their two distances will be the larger of the two margins, instead of the value addition code example of two margins:
<! DOCTYPE html>
Results:


The structure of the box model requires:<!--box Model: Composition: Container size +padding+border+margin--
Six-ring exercise

<! DOCTYPE html>