Home > Developer > JavaScript
Padding and margin-inside and outside the paddingmargin
I. padding-padding (padding) 1.1 and padding short attribute set all padding attributes in a declaration. This attribute can have 1 to 4 values.
<style> div.outer{ width: 400px; height: 400px; border: 2px solid #000; } div.inner{ width: 200px; height: 200px; background-color:red ; padding: 50px; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body>
Run:
1.2. The padding attribute can also be written in different directions.
<Style>. outer {width: 400px; height: 400px; border: 2px solid #000 ;}. inner {width: 200px; height: 200px; background-color: green;/* padding: 40px 80px; the running effect is the same */padding-top: 40px; padding-right: 80px; padding-bottom: 40px; padding-left: 80px ;} </style> <body> <div class = "outer"> <div class = "inner"> </div> </body>
Run:
1.3. The padding attribute value can be in four forms:2. Set all margin attributes in a declaration for the margin-margin 2.1 and margin attributes. This attribute can have 1 to 4 values.
<style> div.outer{ width: 400px; height: 400px; border: 2px solid #000; } div.inner{ width: 200px; height: 200px; background-color:green ; margin: 50px; } </style>
The code running effect is as follows:
2.2. the margin attribute can also be written in different directions.
<Style> div. outer {width: 400px; height: 400px; border: 2px solid #000;} div. inner {width: 200px; height: 200px; background-color: green;/* margin: 40px 80px 20px 40px; the running effect is the same */margin-top: 40px; margin-right: 80px; margin-bottom: 20px; margin-left: 80px ;} </style>
The code running effect is as follows:
2.3. The value of the margin attribute can be in four forms:
3. Differences between the padding and the padding
1. margin and padding are both important elements of the Box Model, both of which are used to handle the layout of the relationship between them and other boxes.
2. Introduction of the image: in summer, girls sometimes encounter a color wolf metamorphosis in the subway. If you choose to wear a down jacket and keep the distance from the color wolf, it is the padding of the padding. If you choose to move your position away from the color wolf, that is the margin of margin.
3. The position of the border with borde indicates that pading is inside the border of border and margin is outside the border of border.
4. the padding of the padding changes the size of the box model (that is, the width and height), but not the margin model.
5. Use a negative value for the margin of margin. pading is not allowed.
<style> .box{float:left;border:10px solid #000;margin:20px;} .box div{width:100px;height:100px;background:red;} .div1{margin-top:-30px;} .div2{margin-left:-30px;} .div3{margin-bottom:-30px;} .div4{margin-right:-30px;}</style><body> <div class="box"> <div class="div1"></div> </div> <div class="box"> <div class="div2"></div> </div> <div class="box"> <div class="div3"></div> </div> <div class="box"> <div class="div4"></div> </div></body>
Run the following code:
6. The background image is displayed on the padding of the padding and not on the margin of the margin.
<style> .box{ width:320px; border: 10px solid #000000; } div{ width: 200px; height: 200px; margin: 40px; padding: 20px; border: 1px solid red; background: url(img/2mail.jpg) no-repeat; } </style> <body class="box"> <div class="box"> <div> </div> </div> </body>
Run the following code:
4. compatible with 4.1. The IE browser does not support "inherit" of the padding and the margin padding to inherit attribute values.
4.2. Outer margin merge
4. 2.1,When an element appears on the other element, the bottom margin of the first element and the top margin of the second element are merged into the maximum value. See:
Solution: Give all the outer margins to the lower margin of the above element or the upper margin of the following element.
Significance of margin merge:
4. 2.2. When an element is contained in another element (if there is no padding or the border separates the margin), the upper and/or lower margins of the element will also be merged. See:
Solution:1. Add overflow to parent set: hidden; 2. border or padding; 3. Use padding instead of margin.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
