42 HTML & CSS padding & box model

The padding CSS shorthand property sets the padding area on all four sides of an element at once. Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items. In this lesson, we will take a look at the CSS Box Model. You'll get an understanding of how it works and the terminology that relates to it. Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) Objective: To learn about the CSS Box Model, what makes up the box model and how to switch to the alternate model. Block and inline boxes In CSS we broadly have two types of boxes — block boxes and inline boxes. The type refers to how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes have an inner display type and an outer display type. In general, you can set various values for the display type using the display property, which can have various values.