RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/box-sizing below:

box-sizing · WebPlatform Docs

box-sizing Summary

The box-sizing property alters the CSS box model used to calculate widths and heights of elements, so that they can be equal to the width and height of the content-, padding- or border-box.

Overview table

Initial value: content-box
Applies to: all elements that accept width or height
Inherited: No
Media: visual
Computed value: specified value
Animatable: Yes

CSS Object Model Property
:

Syntax

box-sizing: border-box
box-sizing: content-box
box-sizing: padding-box

Values

content-box: The width and height properties (also including min-width, max-width, min-height and max-height properties) are calculated as the width/height of the content, but not the border, margin, or padding. This is the traditional behaviour of width and height as specified by CSS2.1.
padding-box: The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding. The dimensions of the content alone are thus calculated by subtracting the padding widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.
border-box: The width and height (also including min-width, max-width, min-height and max-height properties) of an element are calculated as the width/height of the content plus the padding and border.

The dimensions of the content alone are thus calculated by subtracting the padding and border widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.

Examples

The following examples assume markup that looks like this.

<div class="parent">
    <div class="child"></div>
</div>

This CSS makes it so that the child <div> will always An element with padding that occupies half the width of its parent. This works because it has box-sizing: border-box set on it, so the total width will always be content plus padding plus border. As the border and padding get thicker, the element doesn’t get larger. Instead, the content gets smaller to make way for the change.



.parent {
   width: 50%;
   height: 200px;
   background: red;
 }

 .child {
    border: 30px solid rgba(0,0,0,0.5);
    float: left;
    padding: 3rem;
    background: blue;
    width: 50%;
    height: 100px;
    box-sizing: border-box;
 }

View live example

Input elements with type search are rendered with border-box in Safari 5 and Chrome. You can normalize this behavior across all browsers using the following code.

input[type="search"] {
    box-sizing: content-box;
}

Related specifications

CSS Level 3 - Basic User Interface Module: W3C Working Draft