Box properties

Purpose

Box style properties that set box and table values such as display, visibility, margins and padding.

Controls

Properties

display

Specifies the type of box an element should generate. The default value is 'inline'.

Option	Description
block	The element should generate a block box.
compact	Depending on context, creates either an in-line or block level rendering box.
inline	The element should generate an inline box.
inline-block	The element should generate a block box, laid out as an inline box.
inline-table	The element should generate an inline box, with no line break before or after.
list-item	The element should generate a block box, and an inline box for the list marker.
marker	The element will generate an additional marker box along with the content box.
mcs-box	The element should generated a flexible box.
mcs-marquee	The generated element should enable the scrolling of some content across the screen of a mobile device. This option is deprecated.
none	No box will be generated.
run-in	The element will generate a block or inline box, depending on context.
table	The element should behave like a table.
table-caption	The element should behave like a table caption.
table-cell	The element should behave like a table cell.
table-column	The element should behave like a table column.
table-column-group	The element should behave like a table column group.
table-footer-group	The element should behave like a table footer row group.
table-header-group	The element should behave like a table header row group.
table-row	The element should behave like a table row.
table-row-group	The element should behave like a table row group.
inherit	The value of the property should be inherited from the parent element.

height

Sets the height of an element. The default value is 'auto'.

Option	Description
auto	The browser should calculate the height.
<length>	Specifies the height and height units.
<percentage>	Defines the height in percent of the containing block.
inherit	The value of the property should be inherited from the parent element.

line-height

Specifies the minimal height of each inline box or the exact height of each box. The default value is 'normal'.

Option	Description
normal	A normal line height.
<length>	A fixed line height and height units.
<number>	A number that will be multiplied with the current font size to set the line height.
<percentage>	A line height in percent of the current font size.
inherit	The value of the property should be inherited from the parent element.

margin

Sets all four margin properties. The default value is '0'.

Option	Description
auto	The browser calculates margins.
<length>	Specifies the margin in length units.
<percentage>	Specifies the margin in percent of the width of the containing element.
inherit	The value of the property should be inherited from the parent element.

margin-top, margin-right, margin-bottom, margin-left

Control margins. The default value is '0'.

Option	Description
auto	The browser calculates margins.
<length>	Specifies the margin in length units.
<percentage>	Specifies the margin in percent of the width of the containing element.
inherit	The value of the property should be inherited from the parent element.

max-height, max-width

Set the maximum height and width of an element.

Option	Description
<length>	Specifies the maximum height/width in length units.
<percentage>	Specifies the maximum height/width in percent of the height/width of the containing element.
inherit	The value of the property should be inherited from the parent element.

mcs-box-shadow

Page authors can use the mcs-box-shadow property to create a blurred and shifted copy of an element that is intended to imitate a shadow effect. The property accepts a sequence of comma-separated rules; each rule defines a single shadow effect. See also: Box shadows.

mcs-box-shadow: inset <color> <offset-x> <offset-y> <blur-radius> <spread-radius>;

where:

inset

An optional keyword which, if present, changes the shadow from an outer shadow to an inner shadow.

<color>

The color for the shadow effect represented by a color name or a hex code.

<offset-x>, <offset-y>

Length values that define the horizontal and vertical distance of the shadow, relative to the element.

<blur-radius>

An optional length value which specifies the blur radius of the shadow; the higher the value, the bigger the blur effect and the shadow becomes wider and lighter. The default value is '0', i.e. no blur.

<spread-radius>

An optional length value which specifies the spread distance. A positive value causes the shadow to expand in all directions by the specified radius. A negative value causes the shadow to shrink. The default value is '0', i.e. the shadow will be of the same size as the element.

mcs-box-sizing

Controls how the browser calculates the size of a box. The default value is 'content-box '. See also: Box sizing.

Option	Description
border-box	Indicates 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.
content-box	Indicates that the width and height properties apply to the width and height of the content box of the element.
inherit	The value of the property should be inherited from the parent element.

min-height, min-width

Set the minimum height and width of an element.

Option	Description
<length>	Specifies the minimum height/width in length units.
<percentage>	Specifies the minimum height/width in percent of the height/width of the containing element.
inherit	The value of the property should be inherited from the parent element.

padding

Controls all four paddings. The default value is '0'.

Option	Description
<length>	Specifies the padding in length units.
<percentage>	Specifies the padding in percent of the width of the containing element.
inherit	The value of the property should be inherited from the parent element.

padding-top, padding-right, padding-bottom, padding-left

Control paddings. The default value is '0'.

Option	Description
<length>	Specifies the padding in length units.
<percentage>	Specifies the padding in percent of the width of the containing element.
inherit	The value of the property should be inherited from the parent element.

visibility

Specifies whether a box is visible or hidden. The default value is 'inherit'.

Option	Description
collapse	Applies only to table elements. The value of 'collapse' removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.
hidden	The element should be invisible.
visible	The element should be visible.
inherit	The value of the property should be inherited from the parent element.

width

Sets the width of an element. The default value is 'auto'.

Option	Description
auto	The browser should calculate the width.
<length>	The width and width units.
<percentage>	Defines the width in percent of the containing block.
inherit	The value of the property should be inherited from the parent element.

Example

<?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 properties</title>
    <style type="text/css">
      div {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        display: block;
      }
      h2 {
        line-height: 300%;
      }
      p {
        height: 300px;
        width: 300px;
      }
        div. hidden {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Antenna Software</h2>
      <div>
        <p>Antenna Software helps organizations solve the complexity of delivering the true mobile Internet
          to thousands of unique devices, without compromise, to the highest quality user
          experience, performance and reliability. Antenna Software is the world leader in Intelligent
          Content Delivery solutions.</p>
      </div>
      <div class="hidden">
        <p>This text should not be visible.</p>
      </div>
    </div>
  </body>
</html>

Related topics

• Style property categories
• Box sizing
• Box shadows