Home > Developer > Web Develop
? By default, the width or height of an inner element (for example,input) does not contain the border and padding of the element, which is the element that needs to be set using the box-sizing property.
? box-sizing is a property of CSS3 , you can set the above values:
1. Content-box: the element size does not contain border and padding, which are the default values.
2. Border-box: the element size contains border and padding.
3. Inherit: Specifies the value of the box-sizing property, which should be inherited from the parent element.
1) Example 1(do not use the box-sizing property ):
1. HTML
<! DOCTYPEHTML>
lang="en">
<meta charset="UTF-8">
<title> box-sizing</title>
<style type="Text/css">
#div1 {
width: -px;
Height: -px;
Border: Solid1px Blue;
}
#text1, #text2{
width: -%;
}
#text2{
Padding-left: Tenpx;
}
</style>
<body>
<div id="Div1">
<input type="Text"id="Text1"value="ABC"/>
<input type="Text"id="Text2"value="ABC"/>
</div>
</body>
2. effect
3. you can see that the width of the inner element has exceeded the parent element width.
p) Example 2(using the box-sizing property) :
1. you only need to add the following styles
# Text1 , #text2 {
width : 100 % ;
box-sizing : border-box ;
} 2. effect
? Summary: Wood has ^_^, will be used on the line.
Use the Box-sizing property of CSS3 to set the element size to include border and padding
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
