CSS3 Box-Sizing Property
In our Css Box-Model topic, we have explained how the properties of html elements such as width (width), height (height), margin (outer space), padding (inner space), border (border) should be adjusted while designing the page. According to this traditional method, when calculating the total space occupied by an object, the width, margin, padding and border values should all be calculated how much space they occupy.
If we find it difficult to use this method, the box-sizing feature can make our job a little easier.
Note: Although the Box-Sizing feature is supported with the –webkit- and –moz- prefixes in some old browser versions, it will be useful to learn the traditional method as it will not be supported at all in older versions.
Using the Box-Sizing Feature
box-sizing: border-box; When we apply this property, the border and padding values are also accepted within the width value. (The margin value is not included.)
Let's explain this with two examples.
In our example 1, there are two boxes. Both of these have a width of 200px. However, the padding values are different. Since the second box has more padding value, it takes up more space in terms of both width and height.
.box1 {
width: 200px;
height: 100px;
padding: 0px;
border: 1px solid blue;
}
.box2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Box-sizing example
Box-sizing example
In our second example, the properties of the boxes are the same. However, boxes are also box-sizing: border-box; feature has been applied. Thanks to the box-sizing feature, the boxes take up as much space as the value specified in the width property.
* The same things apply to height.
.box1 {
width: 200px;
height: 100px;
padding: 0px;
border: 1px solid blue;
box-sizing: border-box;
}
.box2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Box-sizing example
Box-sizing example
So box sizing feature, we could consider changing the meaning of the form width value.
You can see the results by changing the codes of these examples in the Topic Examples section.
Other than the border-box value, the following values can also be used:
content-box : Returns it to normal. Width value only expresses the width of the content part.
initial : Returns to default value.
inherit : The value of a parent tag is valid.
Applying to All Tags: If we are going to use the box-sizing feature in the page design, we can apply it to all elements as follows instead of writing to each element one by one.
* {
box-sizing: border-box;
}
what is box-sizing property, using css box sizing, calculating the space occupied by html elements, designing without calculating width padding and border separately
EXERCISES
Read 672 times.