IT. Expert System.

CSS

box-sizing


Property Description

The box-sizing property can be used to specify how certain elements to fit an area in a certain way.

This property has the following syntax:

box-sizing: content-box|border-box|initial|inherit;

Property Values

Value Description
content-box The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height (this is the behavior of width and height as specified by CSS2.1)
border-box The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. 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
initial Specifies that the value of the property should be set to the default value
inherit Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style type="text/css">
div.testcontentbox
{
  width:150px;
  float:left;
  border:1em solid blue;
  box-sizing:content-box;
  /* Firefox */
  -moz-box-sizing:content-box;
}

div.testborderbox
{
  width:150px;
  float:left;
  border:1em solid red;
  box-sizing:border-box;
  /* Firefox */
  -moz-box-sizing:border-box;
}
</style>

<div class="testcontentbox">Left</div>
<div class="testcontentbox">Right</div>
<br/>
<br/>
<br/>
<div class="testborderbox">Left</div>
<div class="testborderbox">Right</div>

This produces the following result:

Left
Right



Left
Right

Browser Support

Chrome Firefox IE Safari Opera
10
4.0 -webkit-
29.0
2.0 -moz-
8.0 5.1
3.2 -webkit-
9.5

Miscellaneous Information

Inherited: No
Defined In: CSS3
Default Value: content-box


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 2402 / . Delta: 0.02350 с