Padding and borders in CSS using the margin, padding, and border options. Learning text indents in html Html indent on all sides

Today we will talk with you a little about the principles of layout, namely, about how to organize indentation on your site for certain elements.

The element in question that needs 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 now discuss.

If you are just building your site, then I recommend that you insert the following properties at the top of your main style file:

* ( -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 needed, you ask? I will answer your question with a good example.

Let's say you have a layout element like this:

This is how the version without using the properties described above (top element) and with them (bottom element) will look like:

What is visible here? That the width of the element in the first version (without using properties) became larger than specified due to the added indents, which is not entirely convenient and correct in terms of layout.

The option with properties is much more aesthetic, but it should be used consciously, because when you add them to an already finished site, you risk getting a crazy design and a “headache” in the form of bringing it all into proper form. All projects that I had a chance to lead from scratch were not without these properties.

And now, in fact, let's talk about the options for organizing indents for elements on your site with illustrative examples.

Inner padding with the "padding" CSS property

For you to understand the whole logic of things, let's take the following layout fragment as an example:

with your styles:

Test_div ( width: 250px; border: 1px solid; )

The visual version looks like this:

What is the property " padding"? It helps to organize the padding in the specified elements. Let's add an indent of 10px to our layout:

Test_div ( width: 250px; border: 1px solid; padding: 10px; // padding 10px )

Visually it looks like this:

The number 10 in the property indicates that inside the specified elements, on each of their four sides, you need to add an indent equal to 10px. Pixels (px) can be replaced with percentages or another value supported by CSS.

There are two options in total indication of the sides from which it is necessary to make indents.

The first- this is with an explicit indication of the parties:

Padding top: 10px // Top padding 10px padding-right: 10px; // 10px right padding padding-bottom: 10px; // 10px bottom padding padding-left: 10px; // Left padding 10px

In this case, each side uses its own property. And second:

Padding: 10px 0 0 0 // 10px top padding, everything else is 0px padding: 10px 0; // 10px padding on top and bottom, and 0px on the sides padding: 0 10px; // 0px padding on top and bottom, and 10px on the sides

Here is a simple enumeration of values, each of which corresponds to its side. The sides are set like this: the first value is up, the second is right, the third is down, and the fourth is left, that is, everything is clockwise.

If there are two values ​​(top and right), then this means that the same values ​​are mirrored down and to the left, and only in this way. Everything seems to be clear. If for some of the sides you do not need to set the indent - 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 well suited for text separation, table cell content, and other textual information. To separate the elements themselves, like those in the example above, there is another property.

Outer margin with CSS "margin" property

A distinctive feature of the property margin” is that the padding is added outside the element, that is, external.

There are also two options for adding.

The first- with an explicit indication of the party:

Margin top: 10px // Top margin 10px margin-right: 10px; // 10px right margin margin-bottom: 10px; // Outer padding 10px from bottom margin-left: 10px; // Margin 10px Left

Second- with enumeration of values, each of which corresponds to its side:

Margin: 10px 0 0 0 // Top margin 10px, everything else 0px margin: 10px 0; // 10px margin at the top and bottom, and 0px on the sides margin: 0 10px; // Margin 0px top and bottom, and 10px on the sides

Here I will not describe all the nuances of working with the rules, everything is the same as about the property “ padding", it is written above.

We use margin with the following value:

Test_div ( width: 250px; border: 1px solid; margin: 10px; // Margin 10px )

Visually it will look like this:

As can be seen from the example, in this case, an outer indent is added to separate the specified elements.

Important feature: if you carefully looked at the result, you might have noticed that the adjacent indents of the elements do not sum up. That is, if the first element has an outer bottom padding of 10px, and the second element has an outer top padding of 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 indentation option is often used in the text, namely in the design of paragraphs, as well as in elements that have visible borders.

But both properties are not limited to these elements. You choose the options for their use yourself, I just tried to give you the basics about them.

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Paragraph 1.10.32 "de Finibus Bonorum et Malorum", written by Cicero in 45 AD. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem fuquia voluptatem fuquia voluptas sit aspernatur aut odit consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam ad aliquam quaerat voluptatem minima voluptatem minima voluptatem quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo paria voluptas nulla?" 1914 English translation, H. Rackham "But I must explain to you how all this mistaken idea of ​​denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of no one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. except to obtain some advantage from it?But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resulta nt pleasure?" Paragraph 1.10.33 "de Finibus Bonorum et Malorum", written by Cicero in 45 AD. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia harumquidem mollitia animi, id est laborum et dolorum fuga. rerum facilis est et expedita distinctio Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus Temporibus autem quibusdam et autae officiis debitis autrerum necessiet even ut et voluptates repudiandae sint et molestiae non recusandae Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." 1914 English translation, H. Rackham "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. frequently occur that pleasures have to be repudiated and annoyances accepted. he endures pains to avoid worse pains."

A task

Remove padding around a bulleted or numbered list.

Solution

Use a null style margin and padding for a UL or OL selector, depending on the list type, as shown in example 1.

Example 1: Indenting a List

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Crocodile Gena
• Shapoklyak

The result of this example is shown in Fig. one.

Rice. 1. List without vertical and horizontal indents

Note that the list markers that appear off the left edge of the web page disappear. To remove only the top and bottom padding without shifting the list to the left, use the margin-top and margin-bottom properties (example 2).

Example 2: Indenting a List

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Crocodile Gena
• Shapoklyak

Block layout is often used when creating a website or blog. As a consequence of this, it is often necessary to indent blocks. For this reason, about how to indent in css detailed in this lesson. To the browser, each tag is a container that has content, padding, margins, and a border. In this lesson, we will learn how to make internal and external indents, consider their main parameters.

The figure below clearly shows the block indentation parameters:

As you can see, indentation can be done in four directions: top indent (top), bottom indent (bottom), left indent (left) and right indent (right). Units can be pixels, percentages, and other CSS units - learn more about them. The lesson uses pixels.

Block padding

The property is responsible for internal padding in CSS. padding. So, let's look at an example of setting indents for a block:

padding-top: 5px; /*top padding*/ padding-left: 8px; /*left padding*/ padding-right: 8px; /*right padding*/ padding-bottom: 5px; /*bottom padding*/

AT this example padding is set separately for each side of the block. In addition, there are several ways to set indents in CSS:

margin: 5px 8px 5px 8px; /*top, right, bottom, left margins*/ margin: 5px 8px 5px; /*describes the top, left, right, bottom margins*/ margin: 5px 8px; /*describes the top and bottom, right and left margins*/ margin: 7px; /*describes all 7px padding*/

It is easier to remember the first and last methods. In the first case, the indents are set clockwise (upper, right, lower, left) - we can specify any indent value, in the latter case, the indents on all sides will be the same.

Block margins

The property is responsible for the margins in CSS margin. Examples of margins in CSS:

margin-top: 5px; /*top margin*/ margin-left: 10px; /*left margin*/ margin-right: 10px; /*right margin*/ margin-bottom: 5px; /*bottom margin*/

padding: 5px 10px 5px 10px; /*top, right, bottom, left margins*/ padding: 5px 10px 5px; /*describes top, left, right, bottom padding*/ padding: 5px 10px; /*describes the top and bottom, right and left paddings*/ padding: 7px; /*describes all 7px margins*/

In this way, how to indent in css- the question is not difficult, but very relevant. To better understand the information described above, remember that there are two properties: padding - inner margins and margin - outer margins. Also, as you already know, there are several ways to set indents, you can use them.

For a more beautiful display of elements on a web page, external and internal indents in css are used, and we will now analyze this using examples.

Each element, be it a paragraph, a div, an image or a video, is a kind of block in which you can indent both inside using the padding property and outside using the margin .

These properties for indents are written in css in this way (a paragraph is taken as an example):

Instead of the P tag, you write your element, of course, for which indents will be applied.

Be sure to understand and remember that for the margin and padding parameters, the construction of indents for each side is the same.
That is, we have 4 values ​​in each indent:

Indent values.

• First value: indent from above;
• Second value: indent on the right;
• Third value: indent from below;
• Fourth value: indentation on the left.

In this example, I made a margin margin in css in this way: I wrote 20px on top, 10px on the left and right (as a rule, they are the same for symmetry), and 30px on the bottom.

And for the padding, I specified the padding: 10px from the top, left and right, and 14px from the bottom.

The value for padding in the margin and padding properties can be reduced, provided they have the same amount.
From my example, the abbreviated notation will already look like this:

That is, when there is no last numeric entry, in this case for the indent on the left, the browser automatically substitutes the same value for the indent on the left as the value on the right.
And in my case, the indents on the right and left will be 10px in both margin and padding .

And if you have the same values ​​for the top and bottom margins (for example: 16px ), and the same values ​​for the left and right margins (for example: 20px ), then the entry will have an even more abbreviated form:

Accordingly, for the css indent, the entry is made identical to this one.

Application of single indents: for each side separately.

The following single value properties are used to specify a single indent:

Padding properties for each side.

• margin-top: 3px; outer top indent;
• margin-left: 4px; outer left indent;
• margin-right: 6px; outer right indent;
• margin-bottom: 10px; outer bottom margin.

In the same way, entries are written for internal indents, only you need to replace margin with padding .

For example, you have all the indents in css for all img images.

That is (for clarification) the margin has the following values: top 10px , left and right: 20px each, and bottom 14px .
And the padding is 6px on all 4 sides.

Let's say you decide to put another picture on the page, but for it you want to change only the top margin, and leave the rest as they are. And to accomplish this task, it is enough to register a class for this image, and add an additional entry to the css.

As a result, the image you added with the verx class will take all the padding specified in the css for the img tag, and change only the outer padding for the top side (in our case: 40px ).

I tried to make the description for css indents more detailed, but if you have any questions, ask them through the comments.