Css box-sizing
Download as PPTX, PDF0 likes515 views
The document explains the CSS3 box-sizing property, which allows padding and borders to be included in an element's total width and height. Without this property, elements may appear larger than intended due to added padding and borders. With box-sizing: border-box; applied, elements maintain their specified width and height regardless of padding and border, as illustrated with example <div> elements.
Css box-sizing
- 1. CSS – Cascading Style Sheet CSS – Box Sizing Call US: +91-9915337448 Email Us: [email protected]
- 2. CSS3 Box Sizing • The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height. Call US: +91-9915337448 Email Us: [email protected]
- 3. Without box-sizing Property By default, the width and height of an element is calculated like this: • width + padding + border = actual width of an element • height + padding + border = actual height of an element • This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height). Call US: +91-9915337448 Email Us: [email protected]
- 4. Without box-sizing Property - Example • The following illustration shows two <div> elements with the same specified width and height: Call US: +91-9915337448 Email Us: [email protected] This div is smaller (width is 300px and height is 100px). This div is bigger (width is also 300px and height is 100px).
- 5. Without box-sizing Property - Example • The two <div> elements above end up with different sizes in the result (because div2 has a padding specified): Call US: +91-9915337448 Email Us: [email protected] .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; }
- 6. With the CSS3 box-sizing Property • The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height. • If you set box-sizing: border-box; on an element padding and border are included in the width and height: Call US: +91-9915337448 Email Us: [email protected] Both divs are the same size now! You can see the difference !
- 7. With the CSS3 box-sizing Property • Here is the same example as above, with box-sizing: border-box; added to both <div> elements: Call US: +91-9915337448 Email Us: [email protected] .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; }