Sideway
output.to from Sideway
Draft for Information Only

Content

Box Model
 Box Elements
 Box Model Property
  Content Dimension Properties
  Margin Properties
  Padding Properties
  Border Properties
   Border Width Properties
   Border Color Properties
   Border Style Properties
   Border Properties
  Outline Properties:

Box Model

Box model is a virtual rectangular box used in CSS rendering as a locating block for tagged elements in a document.

Box Elements

A box model consists of a virtual content area for locating the presentation of tagged element and optional predefined surrounding areas, padding, border, and margin for phsical or visual presentation.

image Content Area The content area is the canvas for presenting. Content Edge or Inner Edge The content edge surrounds the rectanguar content area of the box and gives the measurement width and height of the inner edge of the box model  Padding Area The padding area is the spacing gap between content area and border. Padding Edge The padding edge surround the box padding. Border Area The border area is the outer surrounding decoration. Border Edge or Outline The border edge surround the box border and is the outline of the box model. Margin Area The margin area is the spacing gap between the box with other neighborhood boxes Margin Edge or Outer Edge The margin edge surround the box margin and is the outer edgo of the box model.

Box Model Property

Properties of a box model

Content Dimension Properties

The physical dimension of the content area of the box model.

'width'1,2.1last updated 11 Jul 2016

to set the content width of an element
Value: <length> | <percentage> | auto | inherit Initial: auto Applies to: all elements but non-replaced inline elements, table rows, and row groups Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage or 'auto' as specified or the absolute lengthRemarks: This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

'height'1,2.1last updated 11 Jul 2016

to set the content height of an element
Value: <length> | <percentage> | auto | inherit Initial: auto Applies to: all elements but non-replaced inline elements, table columns, and column groups Inherited: no Percentages: see prose Media: visualComputed Value: the percentage or 'auto' see prose under <percentage> or the absolute lengthRemarks: This property does not apply to non-replaced inline elements. See the section on computing heights and margins for non-replaced inline elements for the rules used instead.

Margin Properties

The physical width of the spacing between content area and border of the box model.

'margin-top'1,2.1last updated 11 Jul 2016

to set the margin top of an element
Value: <margin-width> | inherit Initial: 0 Applies to: all elements except elements with table display types other than table-caption, table and inline-table Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks: This property have no effect on non-replaced inline elements.

'margin-right'1,2.1last updated 11 Jul 2016

to set the margin right of an element
Value: <margin-width> | inherit Initial: 0 Applies to: all elements except elements with table display types other than table-caption, table and inline-table Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks: This property have no effect on non-replaced inline elements.

'margin-bottom'1,2.1last updated 11 Jul 2016

to set the margin bottom of an element
Value: <margin-width> | inherit Initial: 0 Applies to: all elements except elements with table display types other than table-caption, table and inline-table Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks: This property have no effect on non-replaced inline elements.

'margin-left'1,2.1last updated 11 Jul 2016

to set the margin left of an element
Value: <margin-width> | inherit Initial: 0 Applies to: all elements except elements with table display types other than table-caption, table and inline-table Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks: This property have no effect on non-replaced inline elements.

'margin'1,2.1last updated 11 Jul 2016

to set the margin of an element
Value: <margin-width>{1,4} | inherit Initial: see individual properties Applies to: all elements except elements with table display types other than table-caption, table and inline-table Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: see individual propertiesRemarks: The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet. If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Padding Properties

The physical width of the spacing between the border of the box model with the inner and outer borders of another box model.

'padding-top'1,2.1last updated 11 Jul 2016

to set the padding top of an element
Value: <padding-width> | inherit Initial: 0 Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks:

'padding-right'1,2.1last updated 11 Jul 2016

to set the padding right of an element
Value: <padding-width> | inherit Initial: 0 Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks:

'padding-bottom'1,2.1last updated 11 Jul 2016

to set the padding bottom of an element
Value: <padding-width> | inherit Initial: 0 Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks:

'padding-left'1,2.1last updated 11 Jul 2016

to set the padding left of an element
Value: <padding-width> | inherit Initial: 0 Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: the percentage as specified or the absolute lengthRemarks:

'padding'1,2.1last updated 11 Jul 2016

to set the padding of an element
Value: <padding-width>{1,4} | inherit Initial: see individual properties Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column Inherited: no Percentages: refer to width of containing block Media: visualComputed Value: see individual propertiesRemarks: The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet. If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Border Properties

Unlike margin and padding area, border is not just a transparent spacing, but a decoration surrounding the box model. The available proerties for border area are width, color, and style.

Border Width Properties

The physical width of the border of the box model

'border-top-width'1,2.1last updated 11 Jul 2016

to set the border-top width of an element
Value: <border-width> | inherit Initial: medium Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: absolute length; '0' if the border style is 'none' or 'hidden'Remarks:

'border-right-width'1,2.1last updated 11 Jul 2016

to set the border-right width of an element
Value: <border-width> | inherit Initial: medium Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: absolute length; '0' if the border style is 'none' or 'hidden'Remarks:

'border-bottom-width'1,2.1last updated 11 Jul 2016

to set the bottom border width of an element
Value: <border-width> | inherit Initial: medium Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: absolute length; '0' if the border style is 'none' or 'hidden'Remarks:

'border-left-width'1,2.1last updated 11 Jul 2016

to set the border left width of an element
Value: <border-width> | inherit Initial: medium Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: absolute length; '0' if the border style is 'none' or 'hidden'Remarks:

'border-width'1,2.1last updated 11 Jul 2016

to set the border width of an element
Value: <border-width>{1,4} | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: This property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet. If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Border Color Properties

The physical color of the border of the box model

'border-top-color'1,2.1last updated 11 Jul 2016

to set the border-top color of an element
Value: <color> | transparent | inherit Initial: the value of the 'color' property Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: when taken from the 'color' property, the computed value of 'color'; otherwise, as specifiedRemarks:

'border-right-color'1,2.1last updated 11 Jul 2016

to set the border-right color of an element
Value: <color> | transparent | inherit Initial: the value of the 'color' property Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: when taken from the 'color' property, the computed value of 'color'; otherwise, as specifiedRemarks:

'border-bottom-color'1,2.1last updated 11 Jul 2016

to set the border bottom color of an element
Value: <color> | transparent | inherit Initial: the value of the 'color' property Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: when taken from the 'color' property, the computed value of 'color'; otherwise, as specifiedRemarks:

'border-left-color'1,2.1last updated 11 Jul 2016

to set the border left color of an element
Value: <color> | transparent | inherit Initial: the value of the 'color' property Applies to: allInherited: no Percentages: N/AMedia: Computed Value: when taken from the 'color' property, the computed value of 'color'; otherwise, as specifiedRemarks:

'border-color'1,2.1last updated 11 Jul 2016

to set the border color of an element
Value: [ <color> | transparent ]{1,4} | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: The 'border-color' property sets the color of the four borders. The 'border-color' property can have from one to four component values, and the values are set on the different sides as for 'border-width'. If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color. If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Border Style Properties

The physical style of the border of the box model

'border-top-style'1,2.1last updated 11 Jul 2016

to set the border-top style of an element
Value: <border-style> | inherit Initial: none Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks:

'border-right-style'1,2.1last updated 11 Jul 2016

to set the border-right style of an element
Value: <border-style> | inherit Initial: none Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks:

'border-bottom-style'1,2.1last updated 11 Jul 2016

to set the bottom border style of an element
Value: <border-style> | inherit Initial: none Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks:

'border-left-style'1,2.1last updated 11 Jul 2016

to set the border left style of an element
Value: <border-style> | inherit Initial: none Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: as specifiedRemarks:

'border-style'1,2.1last updated 11 Jul 2016

to set the border style of an element
Value: <border-style>{1,4} | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual properties Remarks: The 'border-style' property sets the style of the four borders. The 'border-style' property can have from one to four component values, and the values are set on the different sides as for 'border-width'. Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set. If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Border Properties

The physical style of the border of the box model

'border-top'1,2.1last updated 11 Jul 2016

to set the border-top properties of an element
Value: [ <border-width> || <border-style> || 'border-top-color' ] | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: This is a shorthand property for setting the width, style, and color of the top border of a box.

'border-right'1,2.1last updated 11 Jul 2016

to set the border-right properties of an element
Value: [ <border-width> || <border-style> || 'border-top-color' ] | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: This is a shorthand property for setting the width, style, and color of the right border of a box.

'border-bottom'1,2.1last updated 11 Jul 2016

to set the border bottom properties of an element
Value: [ <border-width> || <border-style> || 'border-top-color' ] | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: This is a shorthand property for setting the width, style, and color of the bottom border of a box.

'border-left'1,2.1last updated 11 Jul 2016

to set the border left properties of an element
Value: [ <border-width> || <border-style> || 'border-top-color' ] | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: This is a shorthand property for setting the width, style, and color of the left border of a box.

'border'1,2.1last updated 11 Jul 2016

to set border properties of an element
Value: [ <border-width> || <border-style> || 'border-top-color' ] | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visualComputed Value: see individual propertiesRemarks: The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used. If the properties have overlapping functionality, the order in which the rules are specified is important.

Outline Properties:

Outline is the visual draw over the outer edge of the border.

'outline-color'2last updated 11 Jul 2016

to set the outline-color of an element
Value: <color> | invert | inherit Initial: invert Applies to: allInherited: no Percentages: N/AMedia: visual, interactiveComputed Value: as specifiedRemarks: The 'outline-color' accepts all colors, as well as the keyword 'invert'. 'Invert' is expected to perform a color inversion on the pixels on the screen. This is a common trick to ensure the focus border is visible, regardless of color background.

'outline-style'2last updated 11 Jul 2016

to set the outline-style of an element
Value: <border-style> | inherit Initial: none Applies to: allInherited: no Percentages: N/AMedia: visual, interactiveComputed Value: as specifiedRemarks: The 'outline-style' property accepts the same values as 'border-style', except that 'hidden' is not a legal outline style.

'outline-width'2last updated 11 Jul 2016

to set the outline-width of an element
Value: <border-width> | inherit Initial: medium Applies to: allInherited: no Percentages: N/AMedia: visual, interactiveComputed Value: absolute length; '0' if the outline style is 'none'Remarks: The 'outline-width' property accepts the same values as 'border-width'.

'outline'2last updated 11 Jul 2016

to set the outline property of an element
Value: [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit Initial: see individual properties Applies to: allInherited: no Percentages: N/AMedia: visual, interactiveComputed Value: see individual propertiesRemarks: The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

Sources:

  • CSS 2.1
    • 'CSS-property-name'
    • 'CSS-pseudo-class-name'
    • 'CSS-value'
    • "css-attribute-name"
    • css-keyword-value
    • <css-basic-data-type>
  • Modifier Notation:
    • ( * ): zero or more; 
    • ( + ): one or more;
    • ( ? ): zero or one times;
    • (   ): exactly once
    • ( {A,B} ): at least A and at most B times
  • Grouping:
    • ( [] ): grouping
    • ( a b c ): all must occur in the given order
    • ( | ): one of separated alternatives must occur
    • ( || ): two or more of separated alternatives must occur in any order
    • ( && ): all separated alternatives must occur in any order

©sideway

ID: 180200037 Last Updated: 1/19/2019 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019