The property which is used to calculate the height & width of an element is known as box-sizing.
Syntax :-
box-sizing: content-box|border-box|initial|inherit;
1. content-box :- It is the default property where, border, padding, or margin are not included and the width and height properties (and min/max properties) includes only the content.
2. border-box :- It does not include the margin in width and height properties. It only includes content, padding and border.
3. initial :- It sets the property to its default value.
4. inherit :- Inherits this property from its parent element.
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 80%;
border: 30px solid;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 20px solid yellow;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This is left div.</div>
<div class="box">This is right div.</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
0 Comment(s)