padding: 20px 0px 10px 0px;

As with the margin property, we can leave off as many properties as we wish (one is a minimum) and the rest will be assumed from their opposite side (if specified, otherwise the main value will be used).

From ‘the box model’ to ‘our box model’

We have now explored the depths of the fundamental concept of the box model and welcomed it into our hearts. You should be proud of yourself – this is no easy feat. The box model underpins the design and layout of all HTML elements and understanding it fully will serve you well in your web developing years to come. Before we move on to the next quirky corner of CSS, let’s have a quick recap of the box model to ensure we really do understand this concept:

• The box model applies to all HTML elements.
• Content is at the core of all elements.
• Widths and heights are applied to the content.
• Padding sits between the content and the border.
• Borders sit between padding and margins.
• Borders can have multiple styles used on different sides of the element.
• Borders can allow us to round off the corners of an element.
• Margins sit outside our element and push or pull other elements in.
• Margins can be negative in value.
• Border, margin and padding all have shorthand values as well as their more declarative counterparts.

If any of these concepts tripped you up, don’t worry, just keep on working your way through the book. There will be plenty of opportunities to use the concepts above in an attempt to further familiarize yourself with the properties. Hang in there – all developers were once new to the industry and struggled with at least one concept in their early days. It’s all part of growing to become a better developer.

Floats

Floats tend to be a bit tricky for new developers as it introduces a new way of thinking about layouts that most people would not have encountered before in real life or digitally, but it’s actually quite simple. Remember how by default, all block-level elements start on a new line? Well, floats are a way for us to tell a browser which pieces of content should break from this format and be placed next to each other. It’s easier to show you rather than explain, so let’s see some examples.

First, we’ll look at how to use the float property. We can use the float property with any of the following values: left, right and none.