CSS Box Properties

CSS Box Properties

HTML tags are the building blocks of your web page. Web designers use the concept of the box as a metaphor to describe the various things that you can do to an HTML element, whether it is a single tag or several nested tags. A box can have several properties - including margins, borders, padding, width, and height - that can be influenced by CSS.

Parts of the Box

All HTML elements have four sides: top, right, bottom, and left A. These four sides make up the element's box, to which CSS box properties can be applied. Each side of the box has the following properties:

Content: At the center of the box, this is the substance of the page. The content includes all text, lists, forms, and images you use.

Child Elements: Elements contained within the parent element that are set off by their own HTML tags. Child elements typically have their own box that can be controlled independently of the parent.

Width and Height: The dimensions of the content area. If you leave width and height undefined, these dimensions are determined by the browser.

Padding: The space between the border and the content of the element. Background colors and images also fill this space. If left unset, the size of the padding is generally 0.

Background: Space behind the content and padding of the element. This can be a solid color, one or more background images, or a background gradient.

Border: A line that surrounds the element and can be set separately on any of the sides. The border is invisible unless you set its color, width, and style - solid, dotted, dashed, and so on. You can also set a background image. If left unset, the border size is generally 0.

Outline: Similar to border, but does not occupy any space. It appears underneath the margin and any surrounding sibling elements in the background.

Margin: The space between the border of the element and other elements in the window. If left unset, the browser defines the margin.

The overall width includes any padding and border on a side:

  • element width = content width + left padding + left border width + right padding + right border width

Height is a little different. If a content height is set, but overflow is not, then the height will stretch to accommodate the content plus any padding and borders:

  • element height = height needed to display content + top padding + top border width + bottom padding + bottom border width

If overflow is set to hidden, scroll, or auto, then height is computed:

  • element height = content height + top padding + top border width + bottom padding + bottom border width

Any content that does not fit within the element will either be hidden or scrollable.

Displaying an Element

All elements can be classified according to the way they are displayed - inline or block. By default, every tag has a display style that defines how it will fit with the surrounding tags.

You can use the display property to define whether an element includes line breaks above and below (block), is included with other elements without hard line breaks (inline), is treated as part of a list (list), or is displayed at all (none).

inline flows the element horizontally and its siblings from left to right until the edge of the parent element is encountered, at which point a soft break is added wrapping the content to the next line. Hard line breaks immediately before and after the box are always suppressed.

block places a hard line break above and below the box, flowing the elements vertically. Setting this automatically forces the width of the box to the width of the parent element’s box.

inline-block defines this element as inline, but the content within it is treated as a block.

run-in is contextual, acting as a block element unless its next sibling is also a block element, in which case it will act as an inline element to its sibling. The sibling cannot be a run-in or have floating applied to it for this to work.

table allows you to turn any tag into part of a data table.

list-item places a list-item marker on the first line of text, as well as a break above and below the text. This code allows the item to be used as part of a list even if you are not specifically using a list element.

inherit uses the display value set or implicit for the element’s parent.

none causes this element not to display in CSS browsers. It will appear as though the content doesn’t exist on the page.

Width and Height of Element

By default, the browser automatically sets the width and height of an element to 100 percent of the available width and whatever height is needed to display all the content. You can use CSS to override both the width and height of block elements.

In addition to setting a specific width and height, you can specify a width and height range by setting a minimum and maximum width and height for an element. This is useful for creating flexible designs that will never stretch to unreasonable proportions on larger screens.

Overflowing Content

When an element is clipped or when the parent element’s width and height are less than the area needed to display everything, some content is not displayed. The overflow property allows you to specify how this cropped content is treated. Overflow for the width or height can be controlled independently using overflow-x and overflow-y.

visible forces the cropped part of the element to be displayed, essentially instructing the browser to ignore the cropping, pushing the content to flow outside of the box.

hidden hides the overflow and prevents the scrollbars from appearing.

scroll sets scrollbars around the visible area to allow the visitor to scroll through the element's content. When you set this value, space will be reserved for the scrollbars, even if they are not needed.

auto allows the browser to decide whether scrollbars need to be displayed.

Floating Elements in the Window

In addition to precisely positioning elements within the document, CSS also allows you to set how an element interacts with other elements by floating it. Using the CSS float property, you flow text around content or float block elements next to each other to create columns.

right aligns this element to the right of other elements, causing subsequent elements to wrap horizontally to the left of this element.

left aligns this element to the left of other elements, causing subsequent elements to wrap horizontally to the right of this element.

none overrides floating for this element.

Clearing a floated element

Sometimes, you may find it necessary to override the float property to prevent elements that appear after a floating element from wrapping. Similar to the clear attribute of the HTML break tag, the CSS clear property allows you to specify whether you want to deny floating around the left, right, or both sides of an element.