The type of box applied to an element is defined by display property values such as block and inline , and relates to the outer value of display .

Aside: Inner and outer display types

At this point we"d better also explain inner and outer display types. As mentioned above, boxes in CSS have an outer display type, which details whether the box is block or inline.

Boxes also have an inner display type, however, which dictates how elements inside that box are laid out. By default the elements inside a box are laid out in normal flow , which means that they behave just like any other block and inline elements (as explained above).

We can however, change the inner display type by using display values like flex . If we set display: flex; on an element, the outer display type is block , but the inner display type is changed to flex . Any direct children of this box will become flex items, and will be laid out according to the rules set out in the Flexbox spec, which you"ll learn about later on.

Note : To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to Block and Inline Layout .

When you move on to learn about CSS Layout in more detail, you will encounter flex , and various other inner values that your boxes can have, for example grid .

Block and inline layout however is the default way that things on the web behave - as we said above, it is sometimes referred to as normal flow , because without any other instruction, our boxes lay out as block or inline boxes.

Examples of different display types

Let"s move on and have a look at some examples. Below we have three different HTML elements, all of which have an outer display type of block . The first is a paragraph, which has a border added in CSS. The browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.

The second is a list, which is laid out using display: flex . This establishes flex layout for the items inside the container, however the list itself is a block box and - like the paragraph - expands to the full container width and breaks onto a new line.

Below this we have a block level paragraph, inside which are two elements. These elements would normally be inline , however one of the elements has a class of block, and we have set it to display: block .

We can see how inline elements behave in this next example. The s in the first paragraph are inline by default and so do not force line breaks.

We also have a

which is set to display: inline-flex , creating an inline box around some flex items.

Finally we have two paragraphs both set to display: inline . The inline flex container and paragraphs all run together on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.

In the example you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display modes.

You will encounter things like flex layout later in these lessons; the key thing to remember for now is that changing the value of the display property can change whether the outer display type of a box is block or inline, which changes the way it displays alongside other elements in the layout.

In the rest of the lesson we will concentrate on the outer display type.

What is the CSS box model?

The full CSS box model applies to block boxes, inline boxes only use some of the behavior defined in the box model. The model defines how the different parts of a box - margin, border, padding, and content - work together to create a box that you can see on the page. To add some additional complexity, there is a standard and an alternate box model.

Parts of a box

Making up a block box in CSS we have the:

• Content box : The area where your content is displayed, which can be sized using properties like width and height .
• Padding box : The padding sits around the content as white space; its size can be controlled using padding and related properties.
• Border box : The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.
• Margin box : The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.

The below diagram shows these layers:

The standard CSS box model

In the standard box model, if you give a box a width and a height , this defines the width and height of the content box . Any padding and border is then added to that width and height to get the total size taken up by the box. This is shown in the image below.

If we assume that the box has the following CSS defining width , height , margin , border , and padding:

Box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black; }

The space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box.



Note : The margin is not counted towards the actual size of the box - sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box"s area stops at the border - it does not extend into the margin.

The alternative CSS box model

You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right! For this reason, CSS had an alternative box model introduced some time after the standard box model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The same CSS as used above would give the below result (width = 350px, height = 150px).



By default, browsers use the standard box model. If you want to turn on the alternative model for an element you do so by setting box-sizing: border-box on it. By doing this you are telling the browser to take the border box as the area defined by any size you set.

Box { box-sizing: border-box; }

If you want all of your elements to use the alternative box model, and this is a common choice among developers, set the box-sizing property on the element, then set all other elements to inherit that value, as seen in the snippet below. If you want to understand the thinking behind this, see the CSS Tricks article on box-sizing .

html { box-sizing : border-box; } *, *::before , *::after { box-sizing : inherit; }

Note : An interesting bit of history - Internet Explorer used to default to the alternative box model, with no mechanism available to switch.

Playing with box models

In the below example, you can see two boxes. Both have a class of .box , which gives them the same width , height , margin , border , and padding . The only difference is that the second box has been set to use the alternative box model.

Can you change the size of the second box (by adding CSS to the .alternate class) to make it match the first box in width and height?

Use browser DevTools to view the box model

To set the width, color, and style of each side individually, you can use:

To set the color, style, or width of all sides, use the following:

To set the color, style, or width of a single side, you can use one of the most granular longhand properties:

In the example below we have used various shorthands and longhands to create borders. Have a play around with the different properties to check that you understand how they work. The MDN pages for the border properties give you information about the different styles of border you can choose from.

Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.

На рисунке ниже наглядно представлены параметры отступов блоков:

Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них . В уроке используются пиксели.

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding . Итак, давайте рассмотрим пример задания внутренних отступов у блока:

padding-top: 5px; /*верхний внутренний отступ*/ padding-left: 8px; /*левый внутренний отступ*/ padding-right: 8px; /*правый внутренний отступ*/ padding-bottom: 5px; /*нижний внутренний отступ*/

В данном примере внутренние отступы задаются отдельно для каждой стороны блока. Кроме этого, существует несколько способов задания отступов в CSS:

margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/ margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/ margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/ margin: 7px; /*описывает все внутренние отступы по 7px*/

Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) - величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin . Примеры внешних отступов в CSS:

margin-top: 5px; /*верхний внешний отступ*/ margin-left: 10px; /*левый внешний отступ*/ margin-right: 10px; /*правый внешний отступ*/ margin-bottom: 5px; /*нижний внешний отступ*/

padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/ padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/ padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/ padding: 7px; /*описывает все внешние отступы по 7px*/

Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.

• Сергей Савенков

  какой то “куцый” обзор… как будто спешили куда то