What is the box-sizing property for in CSS?
Question
Is it necessary to specify a <div> s box-sizing ?
What is it used for?
4 answers
solution1
11 ACCPTED 2015-08-07 14:31:29
Here's a div called Blue :
div.Blue {
width: 100px;
height: 100px;
background-color: blue;
}
And here's a div called Greenny :
div.Greenny {
width: 100px;
height: 100px;
background-color: blue;
border: 20px solid green;
}
Greenny is 40px wider and higher than Blue , so he decided to go on a diet:
div.GreennyAfterTheDiet {
width: 100px;
height: 100px;
background-color: blue;
border: 20px solid green;
box-sizing: border-box;
}
Now his width and height are exactly 100px including borders:
It's pretty simple, as you can see. The same rule works for padding .
UPDATE: Here's a simple use case:
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
div {
width: 25%;
float: left;
background-color: #ffd862;
}
The result will look like this:
But if you want to add some padding :
See what happened? Now I'll add box-sizing: border-box; :
And now both div s have width: 25% again, but both also have padding: 10px .
solution2
2 2015-08-07 14:23:09
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Here is an example:
Box 1 uses border-box, the whole box(including border) is 100px in width and height. Box 2 uses content-box, the whole box is 100px + (2x10)px border = 120px in width and height.
.box{ width: 100px; height: 100px; background: deepskyblue; border: 10px solid #000; } .box.b1{ box-sizing: border-box; } .box.b2{ box-sizing: content-box; }
<div class="box b1"></div><br/> <div class="box b2"></div>
The box-sizing property can make building CSS layouts easier and a lot more intuitive as you don't have to keep track of the measurements as much.
solution3
0 2015-08-07 14:42:15
Okay, so CSS works on what is called the box model where there is content, then outside of content padding, outside of padding borders, and then outside of borders margins.
When you're putting a bunch of divs on the page together and you want them to lay out a certain way, then it may help your work flow to apply a box-sizing attribute to all your divs.
Like say you had four items in a horizontal nav bar. I wanted it to be responsive and stretch all the way across the screen I would say "Hey I probably want each nav bar item to have a width of 25%" Easy right?
Well, if I left it the default box-sizing property's value, which is content box, that means that the width is only applied to the content. So that means that the border on my nav bar knocks it out of wack! Check it out
Now when I apply:
box-sizing: border-box
to the list items, it makes it so that the content, padding, and border all apply to the width. So it works now! Check it out here
Therefore, adding a box-sizing to your general CSS properties may help you line things up better in responsive design. Very good question!
Source: https://css-tricks.com/almanac/properties/b/box-sizing/
solution4
0 2021-04-05 15:04:26
If I have given the paragraph width of 500px and add the border of 20px to the first paragraph then the total length of 1st paragraph will be 540px(20px from each side).
To fit that 20px border(From all the sides) to 500 px we should set the property " box-sizing:border-box;: as I have given for paragraph 2. We can see that paragraph 2 has 20px of the border still is acquiring only 500px of the total width.
p{ width:500px; } .classOne{ background-color:#C3D2D5; border-width:20px; border-style: solid; } .classTwo{ background-color:#A2708A; border-width:20px; border-style: solid; box-sizing:border-box; } .classThree{ background-color:#C1F7DC; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <p class="classOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod explicabo nulla incidunt tempore veritatis deserunt at quaerat corrupti eum cupiditate soluta, dignissimos culpa. Consectetur, saepe nam recusandae doloribus architecto ea? Ab nihil dignissimos ea reiciendis maxime corporis, voluptatum eaque labore nisi quidem vero optio nobis est! Eligendi voluptatum non quisquam odio dolore assumenda obcaecati minus, placeat natus nulla id illo? Accusamus dolores voluptatibus tenetur unde ut, obcaecati cupiditate magni consequuntur iste quam et fuga ad voluptatem! Quisquam, eveniet quos quod vitae ex a beatae eum saepe veniam consequuntur sapiente reprehenderit! Sapiente, maiores harum cupiditate fuga eligendi labore cum accusamus facilis dolores voluptatem ratione nostrum fugiat incidunt explicabo, facere totam aliquam libero odio rerum! Ullam accusantium, hic culpa molestiae voluptas obcaecati. Totam, illo commodi quidem sed est sapiente eveniet magnam?</p> <p class="classTwo"> Quae, vel ea nemo unde obcaecati recusandae numquam modi, inventore nobis voluptate sed laboriosam quia, nostrum architecto? Pariatur voluptatibus officiis deleniti. Quas ea amet hic culpa? Fugiat praesentium, perferendis eveniet nostrum reprehenderit dicta molestiae officia molestias voluptate culpa deleniti temporibus numquam, maxime facilis, voluptatum repellendus cum animi assumenda repudiandae impedit ipsa! Aperiam sint vel adipisci praesentium hic mollitia nam voluptas voluptatibus voluptatum, provident neque? Id nesciunt voluptatum debitis porro laboriosam doloremque, cumque maiores quisquam. Quos nisi in vel pariatur vero officiis! Ratione explicabo quibusdam asperiores vero doloremque perferendis.</p> <p class=classThree>Quod beatae inventore commodi est maxime hic accusamus temporibus dicta tempora laborum! Vero neque dolorum dolorem necessitatibus ex explicabo quas excepturi labore consectetur! Ipsa earum eveniet, optio accusamus, dolorem doloremque, ut expedita pariatur reprehenderit ad officia vitae qui. Hic ratione eos accusamus repellendus, optio harum dolor similique id reiciendis voluptate adipisci provident consequuntur! Doloremque quae voluptas unde incidunt quis corporis, tempora ipsa eos cumque labore! Perspiciatis, maiores praesentium dolorem magnam asperiores a commodi ullam iste omnis, et ipsa recusandae. Dolor iure laborum corrupti!</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.