Indentation li. How to remove indentation of an HTML element. How to remove padding from the edges of an HTML page

"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 exercising ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irureit dolor in repre sent 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 volatatem sitia quasi. 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 dolim volt minimu aliquamate , quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur , vel illum qui dolorem eum fugiat 1914 English translation, H. Rackham "But I must explain to you how all this mistaken idea of \u200b\u200bdenouncing 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 the truth, the master-builder of human happiness.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. Nor again is there 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. To take a trivial example, which of us ever undertakes laborious physical exercise, 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 non provident, similique sunt in culpa qui officia deserunt hardened mollitia et labor. 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.Tempor necessitibus autem quibusdam autatiut re officiis debus 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.But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. "

A task

Remove indentation around a bulleted or numbered list.

Decision

Use the nullable margin and padding style property for the 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

Result this example shown in fig. one.

Figure: 1. List without vertical and horizontal indents

Notice that the list bullets that go off the left edge of the web page disappear. To remove only the top and bottom padding without moving 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

Which browsers do they install by default? A similar question often arises for novice layout designers who want to remove such indents from elements such as HTML tables (tag) and their cells, etc. In fact, nothing is easier, but first let's figure it out, and do you mean indentation when looking for an answer to this question?

There are two types of properties in CSS that control the padding (CSS) and margins (CSS) of elements. Their location is shown in the following image:

So, when many beginners say that they want to remove indentation from an element, they actually mean its margins, since it is these that browsers usually add to some elements. No, indents are, of course, also added, but there are very few such elements, for example, tags and browsers set non-zero indents so that the text on the buttons does not fit closely to the frame.

The situation is a little different for HTML tables, since they have two more parameters - this is a CSS property that changes the distance between borders or cell borders (which can also be called indents) and CSS, which removes this distance altogether and makes the borders common. The image below shows the placement of all these margins and padding on the table.

What you need to pay attention to here. Well, firstly, for table cells there are no fields in the usual sense, they are used instead, and secondly, the tag has both margins and indents, like a regular HTML element. Well, and thirdly, the indentation from the inner edge of the table to the cells is the sum of the size of the inner indentation of the table, to which the size of the distance between cells is added.

Well, now that you know all this, let's look at a few examples.

How to remove padding from the edges of an HTML page

HTML and CSS example: remove indentation from the BODY tag

Page content.

Example Description

Example Description

For the visual design of lists, all popular browsers set the margins and indents for the tag, and they put the margins only at the top and bottom (like in paragraphs), and the margin only on the left to move the list items to the right. However, for the sake of reliability, the margins and indents were removed from the tag, in case some browser decides to behave differently. By the way, this approach is called resetting the CSS, you can read.

How to remove indents from a table

HTML and CSS example: remove padding between table cells

Example Description

For greater clarity, frames have been added to tables and cells. I did not apply any special styles to the first table, so that you can see that browsers do not add margins or indents to tables by default, but only set short distance between cells. So we will clean it up.

The CSS: collapse property was applied to the second table so that the borders of adjacent cells became common. But in the third - the distance between the cells was simply zeroed, but their borders (frames) remained in their places, this is very clearly seen by the characteristic thickening of the frames. Naturally, in fact, no thickening occurred, just the frames in the table "snuggled" to each other.

In general, as you can see, both of these methods help remove indents in the table, they just do it a little differently.

In this article, I would like to tell you how to correctly arrange fields (padding) and indents (margin) in CSS.

First of all, let's remember the definition of margins and padding according to the W3C specification. In the box model, margins are the distance between the content and the border. And padding is the distance between the border of the block and the border of the adjacent or parent element.

Thus, if the border and background of the element are not set, then there is no difference, use the padding or margin property to set the padding, but provided that the width (width) and height (height) of the element are not set and the algorithm for calculating the size of the content using properties box-sizing.

In any case, keep in mind that margins can be included in the width or height of the element, or not. The margins are always set outside the element.

Now let's look at how to properly place margins and padding between elements. Take the following block as an example.

This is the news block news. It consists of a headline, a news list and an "More news" link. Let's give them the following class names: news__title, news__list, and news__more-link.

Since each of these elements has the same left and right margins, it is better to set margins to the parent block, rather than set left and right margins for each element individually.

News (padding: 20px 25px;)

Thus, if it is necessary to change the value of the fields on the right and left, this will need to be done in one place... And when adding a new element inside the news block, it will already have the necessary indents on the left and right.

It often happens that all elements inside a block have the same left and right margins, except for one, which should not be indented at all, for example, because of the background. In this case, you can set negative margins for the element. Then you don't have to remove the margins inside the block for other elements.

Now we need to set vertical spacing between elements. To do this, you should determine which of the elements is compulsory... Obviously, a news block cannot exist without a news list, at the same time the link "Other news" may not exist, the heading can also be removed, for example, when the design is changed.

Taking this into account, we set the indent for the title at the bottom, and for the link "Other news" indent at the top.

News__title (margin-bottom: 10px;) .news__more-link (margin-top: 12px;)

We could achieve the same external effect by adding top and bottom padding to the news list.

News__list (margin: 10px 0 12px 0;)

Now you need to set the indents between separate news. Again, keep in mind that the number of news items can change and there can only be one news item in the list.

You can set for each news except the first indent at the top, or for each news except for the last indent at the bottom. The first option is preferable because the: first-child pseudo-selector was added in the CSS 2.1 specification and has wider support than the: last-child pseudo-selector, which was only added in the CSS 3.0 specification.

News__list-item (margin-top: 18px;) .news__list-item: first-child (margin-top: 0;)

Thus, the correct arrangement of margins and indents allows you to flexibly change appearance any block without modifying styles and without breaking the design. The most important thing is to determine which elements of the block are main ( obligatory), and which optional.

Sometimes we cannot rely on required elements. For example, we have a popup window, inside which some title and text can be displayed. Moreover, in some cases there may be no text, and in some cases the title. That is, both elements are optional.

In this case, you can use the following way to set indents.

Popup__header + .popup__text (margin-top: 15px;)

Then the indentation will appear only if both elements will be used. In the case of displaying only the title or only the text, there will be no extra indentation.

Collapsing vertical padding

Another nuance, which not everyone knows about, is associated with vertical indents between adjacent blocks. In the definition of indentation that I gave above, it says that indentation is the distance between borders current and adjacent block. Thus, if we place two blocks under each other and give one of them a 30px bottom margin and the other 20px top margin, the margin between them will not be 50px, but 30px.

That is, the overlap of indents will occur, and the indent between the blocks will be equal to the largest indent, and not the sum of indents. This effect is also called “collapse”.

Please note that horizontal indents, unlike vertical ones, do not "collapse", but are summed up. Fields (padding) are also summarized.

Knowing about "collapsing" padding, we can use this feature to our advantage. For example, if we need to place indents for headings and text inside the article, then for the heading of the first level we will set the margin at the bottom to 20px, and for the heading of the second level, at the top 20px and at the bottom 10px, and for all paragraphs we will set the indent at the top 10px.

H1 (margin-bottom: 24px;) h2 (margin-top: 24px; margin-bottom: 12px;) p (margin-top: 12px;)

Now the h2 heading can be placed either after the h1 heading or after the paragraph. In any case, the top margin will not exceed 24px.

General rules

To summarize, I would like to list the rules that I follow when placing margins and indents.

1. If adjacent elements have the same padding, then it is better to set them to the parent container, and not to the elements.
2. When setting the spacing between elements, you should consider whether this element is required or optional.
3. For a list of the same type of elements - do not forget that the number of elements can vary.
4. Be mindful of vertical padding and use this feature where it is useful.