Главная > Немного обо всём > Открываем блочную модель. Box model — блочная модель

Открываем блочную модель. Box model — блочная модель

The CSS box model is the foundation of layout on the Web - each element is represented as a rectangular box, with the box"s content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model - this is what we"ll look at in this article.

Prerequisites: Basic computer literacy, basic knowledge of , HTML basics (study Introduction to HTML), and an idea of How CSS works (study the previous articles in this module .)
Objective: To learn how the CSS box model works, and how individual elements are laid out on a page.

Box properties

Every element within a document is structured as a rectangular box inside the document layout, the size and "onion layers" of which can be tweaked using some specific CSS properties. The relevant properties are as follows:

Note : Margins have a specific behavior called margin collapsing : When two boxes touch against one another, the distance between them is the value of the largest of the two touching margins, and not their sum.

Active learning: playing with boxes

At this point, let"s jump into an active learning section and carry out some exercises to illustrate some of the particulars of the box model that we discussed above. You can try these exercises in the live editor below, but it might be easier to see some of the effects if you create separate HTML and CSS files locally and try it in a separate browser window instead. You can find the example code on Github .

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

In the editable sample below, we have a set of three boxes, all of which contain text content and have been styled to span the whole of the body width. They are represented by element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.">

, of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
, and element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.">