Block and inline boxes

In CSS we have several types of boxes that generally fit into the categories of block
boxes and inline boxes. The type refers to how the box behaves in terms of page flow
and in relationship to other boxes on the page. Boxes have an inner display type and
an outer display type.

Outer Display Type

If a box has an outer display type of block, then:
- The box will break onto a new line.
- The width and height properties are respected.
- Padding, margin and border will cause other elements to be pushed away from
the box.
- If width is not specified, the box will extend in the inline direction to fill the space
available in its container. In most cases, the box will become as wide as its
container, filling up 100% of the space available.

Some HTML elements, such as <h1> and <p>, use block as their outer display type by
default.

If a box has an outer display type of inline, then:

- The box will not break onto a new line.
- Width and height properties will not apply
- Top and bottom padding, margins, and borders will apply but will not cause inline
boxes to move away from the box.
- Left and right padding, margins, and borders will apply and will cause other inline
boxes to move away from the box.

HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer
display type by default.

Inner Display Type

Boxes also have an inner display type, which dictates how elements inside that box are
laid out.

Block and inline layout is the default way things behave on the web. By default and
without any other instruction, the elements inside a box are also laid out in normal flow
and behave as block or inline boxes.
You can change the inner display type for example by setting display: flex;.
- This element will still use the outer display type block but this changes the inner
display type to flex.
- Any direct children of the box will become flex items.

Examples of different display types

The examples below has three different HTML elements, all of which have an outer
display type of block.

- A paragraph with a border added in CSS is rendered as a block box. The

paragraph starts on a new line and extends the entire available width.
- A list, which is laid out using display: flex. This establishes a flex layout for the
children of the container, which are flex items. The list itself is a block box and
expands to the fuller container width and breaks onto a new line.
- A block-level paragraph, inside which are two <span> elements. These elements
would normally be inline, however, one of the elements has a class of “block”
which gets set to display: block.

In the next example, we can see how inline elements behave.

- The <span> elements in the first paragraph are inline by default and so do not
force line breaks.
- The <ul> element that is set to display: inline-flex creates an inline box containing
some flex items.
- The two paragraphs are 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).

The standard CSS box model

In the standard box model, if you give a box an inline-size and a block-size (or width
and a height) attributes, this defines the inline-size and block-size (width and height in
horizontal languages) of the content box.
The alternative CSS box model
In the alternative box model, any width is the width of the visible box on the page. The
content area width is that width minus the width for the padding and border (see image
below). No need to add up the border and padding to get the real size of the box.

To turn on the alternative model for an element, set box-sizing: border-box on it:

.box {
box-sizing: border-box;
}

If we assume the box has the same CSS as above:

.box {
width: 350px;
inline-size: 350px;
height: 150px;
block-size: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
Now, the actual space taken up by the box will be 350px in the inline direction and
150px in the block direction

To use the alternative box model for all of your elements (which is a common choice
among developers), set the box-sizing property on the <html> element and set all other
elements to inherit that value:

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

Margin
The margin is an invisible space around your box. It pushes other elements away from
the box. Margins can have positive/negative values. Setting a negative margin on one
side of your box can cause it to overlap other things on the page. Whether you are
using the standard or alternative box model, the margin is always added after the size of
the visible box has been calculated.

We can control all margins of an element at once using the margin property, or each
side individually using the equivalent longhand properties:
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
Margin Collapsing
Depending on whether two elements whose margins touch have positive or negative
margins, the results will be different:
- Two positive margins will combine to become one margin. Its size will be equal to
the largest individual margin.
- Two negative margins will collapse and the smallest (furthest) from zero value
will be used.
- If one margin is negative, its value will be subtracted from the total.

Borders
The border is drawn between the margin and the padding of a box. If you are using the
standard box model, the size of the border is added to the width and height of the
content box. If you are using the alternative box model then the size of the border
makes the content box smaller as it takes up some of that available width and height of
the element box.

For styling borders, there are a large number of properties — there are four borders,
and each border has a style, width, and color that we might want to manipulate.

You can set the width, style, or color of all four borders at once using the border
property.

To set the properties of each side individually, use:

● border-top
● border-right
● border-bottom
● border-left

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

● border-width
● border-style
● border-color
To set the width, style, or color of a single side, use one of the more granular longhand
properties:

● border-top-width
● border-top-style
● border-top-color
● border-right-width
● border-right-style
● border-right-color
● border-bottom-width
● border-bottom-style
● border-bottom-color
● border-left-width
● border-left-style
● border-left-color

Padding

The padding sits between the border and the content area and is used to push the
content away from the border. Unlike margins, you cannot have a negative padding.
Any background applied to your element will display behind the padding.

The padding property controls the padding on all sides of an element. To control each
side individually, use these longhand properties:

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

Using display: inline-block

Display: inline-block is a special value of display, which provides a middle ground
between inline and block. Use it if you do not want an item to break onto a new line, but
do want it to respect width and height and avoid overlapping.
- Width and height properties are respected.
- Padding, margin, and border will cause other elements to be pushed away from
the box
 - It doesn’t break onto a new line, and will only become larger than its content if
you explicitly add width and height properties.

Where this can be useful is when you want to give a link a larger hit area by adding
padding. <a> is an inline element like <span>; you can use display:
inline-block to allow padding to be set on it, making it easier for a user to click the
link.

You see this fairly frequently in navigation bars. The navigation below is displayed in a
row using flexbox and we have added padding to the <a> element as we want to be able
to change the background-color when the <a> is hovered. The padding appears to
overlap the border on the <ul> element. This is because the <a> is an inline element.

.box {
margin: <margin-top> || <margin-right> || <margin-bottom> ||
<margin-left>
}</margin-left></margin-bottom></margin-right></margin-top>

auto and centering

Each of the margin properties can also accept a value of auto. A value of auto basically
tells the browser to define the margin for you. In most cases, a value of auto will be
equivalent to a value of 0 (which is the initial value for each margin property) or else
whatever space is available on that side of the element. However, auto is handy for
horizontal centering:

It should also be pointed out that auto is useful only for horizontal centering, and so
using auto for top and bottom margins will not center an element vertically, which can be
confusing for beginners.

display: inline-block brought a new way to create side by side boxes that collapse and
wrap properly depending on the available space in the containing element. It makes
layouts that were previously accomplished with floats easier to create. No need to clear
floats anymore.
Compared to display: inline, the major difference is that inline-block allows to set a width
and height on the element. Also, with display: inline, top and bottom margins &
paddings are not respected, and with display: inline-block they are.

Now, the difference between display: inline-block and display: block is that, with display:
block, a line break happens after the element, so a block element doesn’t sit next to
other elements. Here are some visual examples: