How to remove indentation in a css list. CSS: Remove indentation from list of links
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 navigate with the mouse.
Elements with display: block are rendered as block elements.
An element with display: inline-block is rendered as a block element that wraps around other elements as if it were inline. The content is formatted as a block element, and the element itself is formatted as inline.
Let's look at 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 making the active field size the width of the parent element.
Ul a ( display: block; ) 
We can do even better.
- Make sure that list items do not have fields, unlike links.
- Links do not have margins because margins are not the active area of the elements.
The article consists of obvious things, but quite often we can find blocks of links on the Internet that are not “disfigured” by enlarged active fields.
Original article: Keep Margins Out of Link Lists By: Chris Coyier on 11/29/2010
Task
Remove padding around bulleted or numbered lists.
Solution
Use a margin and padding style property with a null value for the UL or OL selector, depending on the list type, as shown in Example 1.
Example 1: List indentation
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Cheburashka
- Crocodile Gena
- Shapoklyak
The result of this example is shown in Fig. 1.
Rice. 1. List without vertical and horizontal indents
Notice that list markers that appear off the left edge of the web page disappear. To remove only the top and bottom margins without moving the list to the left, use the margin-top and margin-bottom properties (example 2).
Example 2: List indentation
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Cheburashka
- Crocodile Gena
- Shapoklyak
Among the rarely discussed benefits of CSS is the ability to overlay background images to achieve different effects. According to the CSS2 standard, each background image requires a separate HTML element. In most cases, the typical code that describes common interface components provides us with a few HTML elements. One such case is bookmark-based navigation. It's time to take back control of bookmarks, which are constantly growing in popularity as a primary navigation tool. And now, thanks to extensive CSS support, we can improve the quality and appearance of bookmarks on our sites. You're probably already aware that CSS can be used to tame a simple unordered list. You've probably even seen lists with bookmark designs that look something like this: What if we could take the code exactly from the previous example and turn bookmarks into something similar to this: With some simple CSS, it's possible. is publicly available because it can be scaled. So it's no surprise that plain text navigation is making a comeback in web design. However, the appearance of CSS bookmarks has so far been a step back in design, and certainly not something that can be included in a design portfolio. New technologies (like CSS) should make it possible to create something better and with the same design quality as using bitmap-based tables and bookmarks. The Sliding Door Method We can create beautiful, truly flexible UI elements that expand and contract based on text size by using two separate background images. One is for the left side of the bookmark, the other is for the right. Imagine that this pair of pictures are sliding doors covering one doorway. These doors slide and overlap more if the doorway is narrow, and vice versa, they slide and overlap less if you need to close a wider space. This is shown in the illustration: According to this model, one image overlaps part of another. Assuming that there is something unique around the edges of our pictures, such as the rounded corner of a bookmark, we are unlikely to want one picture covered another one behind. To prevent this from happening, we will make the front (in our case left) image as narrow as possible. But at the same time, the picture must be wide enough to preserve its visible uniqueness. In our case, the rounded corners are unique, so the front image will be the width of this rounded part of the image: If the size of the bookmark increases as a result of, for example, scaling the text, our images will spread out to the sides, revealing an unpleasant gap. Therefore, the scale of acceptable expansion needs to be assessed. How much can an object grow when scaling text in the browser? Realistically, you should expect an increase of up to 300%. To compensate for this growth, you need to stretch the background images. In our example, we will make the back image (right side) 400x150 pixels in size, and the front image 9x150 pixels. Don't forget that background images are only visible in the "doorway" of the element they are applied to ("doorway" - content area + padding). Both of our pictures are attached to the outer corners of their respective elements. The visible parts of these images combine inside the doorway to form the shape of a bookmark: As the bookmark is enlarged, the images move apart to fill the wider opening, and the visible area of the images also becomes larger: For our example, I created two images in Photoshop with a soft, simulating three-dimensionality , toning. For one of the bookmarks, I lightened the fill and darkened the stroke - this option will represent the “current” bookmark. Following the chosen model with the left and right images, we must cut the image into two parts: The same must be done with the light image for. Now that we have all 4 images, (1, 2, 3, 4), we can start creating the code and CSS for our bookmarks. Creating Bookmarks As you get more familiar with creating horizontal lists using CSS, you'll notice at least two layout options. groups of objects in one row. Each has its own advantages and disadvantages. Both require some complex aspects of CSS to be addressed, and can quickly become confusing. The first method uses inline elements, the second uses the float property. in some browsers. The second method, which we will focus on, uses floating model to arrange list items in a horizontal row. The floating model, however, can also be disappointing. Her contradictory behavior sometimes violates all conceivable logic. Still, a general understanding of how to deal with multiple floating elements and knowing reliable ways to "exit" a floating row (or contain it in a container) can work wonders. (Ignore the rule I applied to the body element in the example file. It just sets the basic values for margins, padding, colors, and text.) - - - Now we can place the left image in front of the right by applying it to the link (our internal element). Let's immediately add a padding to move the text away from the edges of the bookmark: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px; ) The result is shown in example 2. Our bookmarks began to take shape. At this point, let's address the confused IE5/Mac users who are asking themselves, “What's going on here? Bookmarks are stacked vertically and stretched across the entire screen.” Don't worry, we'll get to you soon. In the meantime, just keep an eye on what is happening or temporarily switch to another browser and rest assured that we will soon solve the IE5/Mac problem. However, this would result in a tiny "step" visible to the attentive eye. But if we change the padding for the links, we can create sharp and right angles inside the current bookmark, as shown in the enlarged image: We will achieve this by reducing the bottom padding for a regular link by 1 pixel (5px - 1px = 4px), and then adding this pixel to the current link: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; ) #header #current a ( background-image:url(" norm_left_on.gif"); padding-bottom:5px; ) This change makes the bottom border visible through regular bookmarks, but hides it for the current bookmark. We get example 3. Final steps A careful eye might have noticed in the previous example the white areas at the corners of the bookmarks. These opaque corners prevent the back image from being visible through the left corner of the front image. Theoretically, we could make these corners the same color as the background behind them. But our bookmarks can increase in height, and then the back gradient background will move down, which will lead to a mismatch in the color of the corners and the background gradient. Instead, we will change our pictures by making their corners transparent. If anti-aliasing is applied to the bookmark outline, we will set the transparent color (matte) to the average value of the back background gradient. Note that the steps we took to create transparent corners resulted in a small "dead" zone on the left side of the tab where it does not respond to mouse hover. The dead zone is outside the text, but it is still noticeable. It is not necessary to use transparent pictures for each side of our bookmark. If we prefer not to have a dead area on our bookmark, we just need to use a solid fill behind the bookmarks, rather than a gradient, and make the corners of the bookmarks the same color. For now we will keep the corners transparent. [ In IE/Win, the mentioned “dead” zone existed even before these steps were taken, and on all sides of the link text. The solution to this problem is covered in the next article in the series Sliding Doors of CSS, Part II. - approx. translator ] - - - And finally, the finishing touches. All at once: make all the text bold, the text on regular bookmarks brown, and on the current bookmarks dark gray, assign the same color to the text for the hover link state, remove the underlining of links. All additions and changes made up to this point are presented in Example 5. Another method for ensuring compatibility Having looked at Example 2, we recognized that there was a problem with IE5/Mac, which stretched bookmarks to the full width of the window, lining them up vertically one below the other. Not quite the effect we are looking for. This navigation loads quickly, is easy to maintain, and the text inside it can be scaled significantly in any direction without disrupting the design. Needless to say, how flexible this method is when creating any sophisticated looking navigation? In NN7.1, access to alternative styles is provided through the main menu View>Use Style, in Opera 7.20 through the main menu View>Style, in IE/Win there is no such option - approx. translator] Other effects may be added to the technique used, which we do not consider here. In our example, we changed the text color for the hover state, but why not change the entire background image for interesting rollover effects. With two nested HTML elements in our code, we can always use CSS to overlay background images and achieve effects we never dreamed of. In our example, we created a horizontal row of bookmarks, but the Sliding Door method can be used in many other cases. What application would you suggest for this method?