Understanding the Box Formatting Model - HTML

CSS uses the box formatting model for all elements. The box formatting model places all elements within boxes—rectangles or squares—that are layered with multiple, configurable attributes.

Note:Box layout and formatting models have been used in traditional publishing for ages. Open any magazine or newspaper and you will see box layout in action—the headline within one box, columns of text in their own boxes, ads in boxes, and so on.

Shows a typical Web page. Although the design doesn’t seem too boxy, if you turn on borders for all elements you can see how each element is contained in a rectangle or square box. Figure shows the same Web page with borders around each element.

Within each CSS box you have control over three different, layered properties:

  • Margins—Represent the space outside of the element, the space that separates elements from one another.

A typical Web page that isn’t overtly boxy in design.

A typical Web page that isn’t overtly boxy in design.

The same Web page with borders around all elements, clearly showing thebox formatting model.

The same Web page with borders around all elements, clearly showing the box formatting model.

  • Borders—Configurable lines inside the elements margins, but outside of the element’s padding (defined next).
  • Padding—The space between the element and the element’s border.

Figure shows a visual representation of how these properties relate.

How the margin, border, padding, and actual element relate to each other spatially.

How the margin, border, padding, and actual element relate to each other spatially.
Each of these properties can be separately configured, but can also work well together to uniquely present an element


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics