Box model and CSS — Content layout fundamentals

The margin and padding properties are quite similar in terms of their values, except for where the indents are set. The padding creates margins inside the element, thereby increasing its size

As a value, the padding property takes four numbers in the following sequence: * top padding. You can set it separately using the padding-top property * right padding. You can set it separately using the padding-right property * bottom padding. You can set it separately using the padding-bottom property * left padding. You can set it separately using the padding-left property

If you look closely at the example above, you will notice that only one value, not four, was used as the value for the padding property. The padding property can take several variations of abbreviated properties: * If only one value is used, it sets the same padding on all sides at once. For example, padding: 20px will set the padding to 20px for the top, right, bottom, and left * If two values are used, it sets the vertical and horizontal padding. For example, padding: 20px 30px will set the padding to 20px top and bottom, and 30px right and left * If three values are used, it sets the top, horizontal and bottom padding. For example, padding: 20px 30px 40px will set the top padding 20px, 30px for right and left padding, and 40px for bottom padding

All the same values and abbreviations are used for the margin property, which sets external indents.

The margin property does not affect the visible size of the elements, but other elements can’t be where the margins are, so it’s included when determining the overall side.

The use of these properties may not seem so obvious now, but there are many exercises ahead of you where these properties will be used.

Notice that the margin between the second and third element is only 40 pixels, not 60 as you might think because it uses the bottom margin of 40 pixels from the second element and 20 pixels from the top of the third. In this case, the outer margins weren’t added up, rather the largest of them was chosen.

This effect is called margin collapse: if the margins of two adjacent elements overlap, then the larger one will be selected.

The visible borders of an element can be set by one of two properties:

The difference between the behavior of the two properties:

Their syntax is similar, so let’s just look at the border property, which is a compound property with three parts:

To set the width, you can use any unit of measurement you know: px, em, rem, %, etc. In fact, the border-width property is also an abbreviated property, which may drive you up the wall. If one value is specified, the width is set for all sides at once, which is sufficient in most cases. The abbreviations are the same as for the margin and padding properties

There are different types of borders, such as solid, dotted, etc. The border-style property is responsible for defining the border type, which can take one of these values:

The principle that seeing it once is better than hearing it a hundred times applies here.

The last property is border-color, which sets the color of the border. You can use DevTools or special sites where you can select a color and get its hex value. There’ll be a link to one of these sites at the end of the lesson.

If you know all the basic properties, you can combine them into a single border property and write the border values using only that property. The order in which they are listed isn’t important, but usually, the properties are listed in the order you learned them: border: border-width border-style border-color.

The following properties affect the visible size of an element: For example, the final width of an element is obtained by adding the width (width property), the left and right padding (padding-left/padding-right properties), and the left and right border (border-left/border-right properties).

This kind of behavior can be a bit of a pain because when you set the width of an element, you expect it to be that width, and not something added on top of other properties. CSS can change this behavior and prevent other properties from changing the width.

There is a property called box-sizing. Its role is to determine whether padding/border will affect the final size of the element. The property takes one of two values:

When you study the layout of different websites, you will often come across this entry in CSS:

HTML elements can be arbitrarily classified into these two groups:

There are many more groups, and you will become acquainted with many of them throughout the course, but for now, it is critical to learn changing the type of element.

The display property is used to change the display type of an element. Its value is the display type itself: block, lowercase, flex container (which you will soon become familiar with), and many other options. Here we’ll consider only three:

You’ve already encountered these values, even if you unaware of them. Each HTML element, by default, has the display property set, for example:

These values can be changed. For example, in a certain layout or at a certain resolution, it is required for <span> to be a block element. To do this, it is enough to change one property:

You can also do the reverse operation, turn a block element into an inline one.

The behavior of the block elements will be the one we have already learned: they will occupy the entire available width, and inline elements occupy space depending on the content within them, and the tag type will no longer mean anything.

The inline-block is an interesting case. By its name, it seems that it is both a block and a inline element, but it’s not. This display type creates a completely new type of element that has not yet been encountered. You can read about it in great detail in the article that is listed at the end of the lesson. If you want to dig deeper into this, we recommend reading it.

And what the inline-block value gives you in practical terms?

Important: the inline-block element is affected by all font properties, including line spacing. This can lead to additional unexpected indentation. We’re elaborate on the line spacing topic in upcoming lessons