The mcs-box-sizing property specifies how the browser should calculate the size of a box.
The mcs-box-sizing property specifies how the browser should calculate the size of a box.
Please refer to http://www.w3.org/TR/css3-ui/#box-sizing for further information.
The mcs-box-sizing property controls how the browser calculates the size of a box. The property takes two values: 'content-box' and 'border-box'. The value of 'content-box' means that the width and height properties apply to the width and height of the content box of the element. The padding and border of the element should be added after the size of the content box has been calculated. The value of 'border-box' means that the padding and border of the element should be laid out inside the specified width and height of the box, i.e. the content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
<head>
<title>Box sizing</title>
<style type="text/css">
div.outer {
mcs-box-sizing: content-box;
width:40em;
border:1em red outset;
}
div.inner {
mcs-box-sizing: border-box;
width:40em;
border:1em green groove;
padding: 4px;
}
div.comment {
mcs-box-sizing: border-box;
width:100%;
padding: 4px;
}
</style>
</head>
<body>
<div>
<h4>Using the mcs-box-sizing property</h4>
<div class="outer">
<div class="inner">Inner div.</div>
<div class="comment">The outer size of the green border should be exactly the same as the inner
size of the red border. </div>
</div>
</div>
</body>
</html>