Today we will talk with you a little about the principles of layout, namely, about how to organize the indentation of certain elements on your site.
The element in question to be indented can be text, an image, a table, or any other HTML element. The main thing is to follow some important rules, which I will tell you about now.
If you are just creating your site, then I recommend that you insert the following properties at the top of your main stylesheet:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *: before, *: after (-webkit-box-sizing: border- box; -moz-box-sizing: border-box; box-sizing: border-box;)
Why is this necessary, you ask? I am answering your question with an illustrative example.
Let's say you have a layout element like this:
This is how the option would look like without using the properties described above (top element) and using them (bottom element):
What can you see here? That the width of the element in the first version (without using properties) has become larger than the specified one due to the added padding, which is not entirely convenient and correct in terms of layout
The option with properties is much more aesthetically pleasing, but it is worth using it consciously, because when you add them to a ready-made site, you risk getting a bad design and a "headache" in the form of bringing all this into proper form. All projects that I have had a chance to lead from scratch have not been without these properties.
And now, in fact, let's talk about the options for organizing the indentation of elements on your site with illustrative examples.
Padding with the "padding" CSS property
So that you understand the whole logic of things, let's take the following layout snippet as an example:
with their styles:
Test_div (width: 250px; border: 1px solid;)
The visual version is as follows:
What is the property “ padding"? It helps to organize padding on the specified elements. Let's add a 10px padding to our layout:
Test_div (width: 250px; border: 1px solid; padding: 10px; // Padding 10px)
Visually, it turns out like this:
The number 10 in the property means that inside the specified elements, on each of their four sides, an indent of 10px must be added. Pixels (px) can be replaced with percentages or other supported CSS values.
There are two options in total indication of the sides from which to indent.
The first - this with an explicit indication of the parties:
Padding-top: 10px; // 10px padding on top padding-right: 10px; // 10px padding to the right padding-bottom: 10px; // Bottom padding 10px padding-left: 10px; // 10px padding to the left
In this case, each side uses its own property. AND second:
Padding: 10px 0 0 0; // 10px padding on top, everything else is 0px padding: 10px 0; // 10px top and bottom padding and 0px padding on the sides padding: 0 10px; // 0px padding on top and bottom, and 10px on the sides
This is a simple enumeration of values, each corresponding to a different side. The sides are set like this: the first value is top, the second is right, the third is bottom and the fourth is left, that is, everything is clockwise.
If there are two values \u200b\u200b(top and right), then this means that the mirror values \u200b\u200bof the same values \u200b\u200bgo down and to the left, and only so. Everything seems to be clear. If you do not need to set the indent for some of the sides, set the value for this side to "0". I like this option more, as it is more compact, but in my endeavors I used the first option.
This type of indentation is good for separating text, table cell content, and other text information. To separate the elements themselves, similar to those in the example above, there is another property.
Padding with the CSS "margin" property
A distinctive feature of the property " margin"Is what the padding is added outside the element, that is, outside.
There are also two options for adding here.
The first - with an explicit indication of the party:
Margin-top: 10px; // 10px padding on top margin-right: 10px; // 10px margin on the right margin-bottom: 10px; // Bottom padding 10px margin-left: 10px; // 10px padding to the left
Second - with an enumeration of values, each of which corresponds to its own side:
Margin: 10px 0 0 0; // 10px top margin, everything else is 0px margin: 10px 0; // 10px padding on top and bottom, and 0px on the sides margin: 0 10px; // Outside padding is 0px top and bottom and 10px on the sides
I will not describe all the nuances of working with the rules here, everything is the same as about the property “ padding», It is written about it above.
We use margin with the following value:
Test_div (width: 250px; border: 1px solid; margin: 10px; // Padding 10px)
Visually, it will look like this:
As you can see from the example, in this case, an external indent is added, separating the indicated elements.
Important feature: If you looked closely at the result, you might have noticed that adjacent padding of elements is not summed up. That is, if the first element has an outer bottom padding of 10px, and the second has an outer top padding with the same value, then the total distance between them will also be 10px. If 10 and 15, respectively, then the total is 15, and so on.
This type of indentation is often used in text, namely in the design of paragraphs, as well as in elements that have visible borders.
But both properties are not limited to just these elements. You choose the options for using them yourself, I just tried to give you the basis about them.
Anya wrote the following code (example 1) and got the page shown in fig. 1. But Anya needs no space between blocks, as well as to the right and left of the blocks. What changes to the code is required for this?
There is too much indent between the heading and the main text, how can I reduce it?
To paragraph (tag
) and title (tag
) automatically adds top and bottom padding, which add up to a large spacing between the heading and the text. To reduce the amount of padding, you need to explicitly add the margin-bottom property to the H1 selector. Moreover, you can set a positive, zero or negative value. This way it is easy to set the desired indentation value.
How do I indent the first line for each paragraph?
When you need to set up paragraph indentation, it is best to use the text-indent style property. Its value determines how much to shift the text of the first line to the right of its original position. In this case, the width of the text block does not change and remains initially set. The amount of indentation can be specified in pixels, percentage or other available units (example 1).
How to remove top and bottom indentation from the list?
Use the style property margin-top and margin-bottom for the UL or OL selector, depending on the list type. You can also use the generic margin property.
How do I change the indentation on a web page?
The padding on the web page, while not visible, does not allow the content to fit snugly against the edges of the browser window for a comfortable reading. You can set your own margin value by changing the margin property of the body selector.
How do I remove padding around a form?
When adding a form via a tag
