Geek Answers Handbook

What is the box size in CSS?

Do I need to specify the size of the div field as border-box | The contents of the box.

What does this mean, can someone help me.

I googled, but I did not understand.

+4
source share
3 answers

Ok, here is a div , and his name is Blue. Say hello to Blue:

 div.Blue { width: 100px; height: 100px; background-color: blue; }

enter image description here

Here is his friend Grinney. Say hello to Greenny:

 div.Greenny { width: 100px; height: 100px; background-color: blue; border: 20px solid green; }

enter image description here

Greenny is 40px wider and taller 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 its width and height are 100px, including the borders:

enter image description here

This is pretty simple, as you can see. The same rule works for filling.

UPD: Here is a simple utility:

HTML

 <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>

CSS

 div { width: 25%; float: left; background-color: #ffd862; }

The result will look like this:

enter image description here

But if you want to add some add-ons

enter image description here

See what happened? Now I will add box-sizing: border-box; :

enter image description here

And now divs have a width: 25% again, but also have padding: 10px at the same time.

+3
source

The box-sizing property is used to tell the browser what calibration properties (width and height) should include.

Here is an example:

Field 1 uses a frame with borders; the entire box (including the border) has a width and height of 100 pixels. Block 2 uses a content box, the entire block 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 simplify and simplify the creation of CSS layouts, since you do not need to track measurements as much as possible.

+2
source

Well, that's why CSS is working on what is called a box model , where there is content, and then outside the content, outside the fill borders, and then outside the borders of the borders.

When you put a bunch of divs on a page together and you want them laid out in a certain way, this can help your workflow apply the box size attribute to all of your divs.

Like you had four elements in the horizontal navigation bar. I wanted it to be responsive and stretch across the screen, I would say: "Hey, I probably want every element of the navigation bar to have a width of 25%." Is it easy?

Well, if I left this box-sizing property as the default, which is the content field, it means that the width applies only to the content. So this means that the border on my navigation bar knocks it out of wack! check it

Now when I apply:

 box-sizing: border-box

into list items, it makes the content, padding, and border apply to the width. So it works now! Check here

Therefore, adding margin size to your common CSS properties may help you get better with responsive design. Very good question!

Source: https://css-tricks.com/almanac/properties/b/box-sizing/

0
source

More articles:


All Articles