li css margins. CSS: Remove indentation from the list of links

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

First of all, let's recall the definition of margins and paddings according to the W3C specification. In the box model, margins are the distance between the content (content) and the border of the block (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 whether to use the padding or margin property to set the indents, but provided that the width (width) and height (height) of the element are not set and the content size calculation algorithm is not changed using box-sizing properties.

In any case, keep in mind that margins may or may not be included in the element's width or height. Indents are always set outside the element.

Now let's look at how to correctly arrange margins and indents between elements. Let's take the following block as an example.

This is the news block. It consists of a headline, a list of news, and a "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 padding, it's better to set the margins on the parent block, rather than setting the left and right padding for each element separately.

News ( padding: 20px 25px; )

Thus, if necessary, 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 padding on the left and right, except for one, which should not have any padding at all, for example, due to the background. In this case, negative padding can be set for the element. Then you don't have to remove the margins inside the block for the rest of the elements.

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

With this in mind, we set the indent from the bottom for the title, and the indent from the top for the “Other News” link.

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

We could achieve the same external result by adding padding at the top and bottom of the news list.

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

Now you need to set the indents between individual news items. Again, you need to take into account that the number of news items can change, and there can only be one item in the list.

You can set for each news except the first indent from above, or for each news except for the last indent from below. The first option is preferred 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 version 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 making changes to the styles and without violating the design. The most important thing is to determine which elements of the block are the main ones ( obligatory), and which optional.

Sometimes we can't rely on required elements. For example, we have a popup window that can display some title and text inside. Moreover, in some cases there may be no text, and in some cases there may be no heading. That is, both elements are optional.

In this case, you can use the following method of setting indents.

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

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

Collapsing vertical margins

Another nuance that not everyone knows about is related to the vertical indents between adjacent blocks. In the definition of indentation that I gave above, it says that the indentation is the distance between borders current and neighboring block. So if we place two boxes one below the other and give one of them a 30px bottom padding and the other a 20px top padding, the padding between them will not be 50px , but 30px .

That is, indents will overlap, and the indent between blocks will be equal to the largest indent, and not the sum of the 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 the "collapse" of indents, we can use this feature to our advantage. For example, if we need to set indents for headings and text inside an article, then for the first level heading we will set the indent from below to 20px , and for the second level heading the indent from above is 20px and from below 10px , and for all paragraphs we will set the indent from above to 10px .

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

Now the h2 heading can be placed both after the h1 heading and after the paragraph. In any case, the top padding will not exceed 24px .

General rules

Summing up, I would like to list the rules that I follow when arranging margins and indents.

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

Task

Remove padding around a bulleted or numbered list.

Solution

Use the margin and padding style property with zero value 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

---

Result this example shown in fig. 1.

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

---

When creating a block with a list of links, it is generally recommended to use the display property with the block or inline-block attributes, which will increase the size of the active link field. Large active link fields improve the usability of elements, large elements are easier to hit with the mouse.

Elements with display: block are rendered as block elements.

An element with display: inline-block is rendered as a block-level element that wraps around other elements as inline. The content is formatted as a block element, and the element itself is formatted as inline.

Consider a simple example with a list of links:

• This little
• piggy went to
• market

If you do not change the style of links, then the size of their active fields corresponds to the size of the text inside them.

We can improve this by sizing the active field to the width of the parent element.

Ul a ( display: block; )

We can do even better.

1. Make sure list items don't have margins, unlike links.
2. Links do not have outer padding, because that padding is not the active area of ​​the elements.

ul li ( padding: 0; margin: 0; ) ul a ( padding: 5px; display: block; )

The article consists of obvious things, but we can often find on the Internet blocks of links that are not “disfigured” by enlarged active fields.

Original article: Keep Margins Out of Link Lists By: Chris Coyier on 11/29/2010

"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."