How to add padding with CSS

Web Design with HTML & CSS

🕑 This lesson will take about xxxx minutes

Every element inside a web page can be considered as a ‘box’. In CSS, we use the term “box model” when we’re talking about the design and layout of HTML elements. The CSS box model is basically a box that is wrapped around each element. The box model consists of:

  • Content – the text and images

  • Padding – clear, transparent space around the content

  • Border – a border that goes around the padding and content

  • Margin – clear, transparent space around the border

When we use the box model, we can add padding, borders, and margins around the content in HTML elements such as headings and paragraphs. Every element inside your web page is actually a box. The image below shows the different parts of the box model.

The video below introduces the box model and shows how to add padding to boxes. In the next tutorials, we will look at how to add margins and borders. Watch the video below and then scroll down the page to see how you can add padding to elements in your web pages.

The sample code below shows how to add padding. There are also some comments inside the /* and */ tags to help you remember the order of the widths for padding on each of the four sides of a box.

Here is the HTML and CSS code:

In the next lessons, you will learn how to also add borders and margins to elements in your web pages.

Next lesson: How to add borders