Down with indents between inline elements (and blocks). How to Indent CSS

All elements that appear on an HTML page are nothing more than rectangles. And basically only two types:

1. block (blok), which occupy the entire width where they are, and are separated from what is above and below them. For example this DIV tags,P,H.
2. built-in (inline). For example, SPAN, STRONG, EM, A and IMG.

tables.

The role of the property increased after the transition from table layout to div layout. This is because float allows a web developer to include columns without having to resort to a table. It can take values right, left, but not center.

Using the display: block; property or display: inline; we are converting one type of rectangle to another. For example, a UL list that has a number of LI blocks can be laid out horizontally:

• PARAGRAPH
• PARAGRAPH
• PARAGRAPH

• PARAGRAPH
• PARAGRAPH
• PARAGRAPH

Using float properties the rectangle is block, but with characteristic feature: Its width will not span the entire content. For example, an h3 header looks like:

this is HEADER h3

If we set the display: inline; property to it, we will see that not only the width has changed, but also the distance above and below the element:

this is HEADER h3

But if I want to place the element on the right and add text-align:right; this time, then we get:

this is HEADER h3

And it’s completely different if float: right;. Please note that the distance above and below the element remains unchanged:

this is HEADER h3

How will the elements next to the title behave?

The top text remains unchanged because a floated element cannot be positioned above the line on which it is created.

this is HEADER h3

But the red text is located under the title and it will wrap around it without having any additional styles. And only the height of h3 will be overcome, the page will return to its natural order.

A B C D Several floating elements will follow the sequence of their location.

ABING text...

And the alignment is done along the very bottom edge of those letters that are on the same side.

A B C D If we walk so that the flow around the element stops from a certain moment (from here), applies clear property. We can add it to an empty tag

In order to evenly place several block rectangles, we give them the same width.

Where is the distance between blocks? If you set , then due to the fact that the floating elements will not have enough space, they will move down.
The issue is resolved by adding another DIV:

Tabular layout is very convenient and understandable, which is probably why its analogue display: table; appeared. The same form is obtained with less code.

, where border-spacing specifies the horizontal and vertical distance between cell borders.

Now you can see how the image gallery is built. I hope no one has forgotten.

Links to sources:

Line blocks(inline-block) in many cases is very convenient tool markings. Examples of their use can be found in the articles.

At the same time, associated with them underwater rock. I would even say a whole cobblestone. Do you want to see him? Place several inline elements (or inline blocks) in a row.

Let's say we have this HTML:

• Storki.
• Just
• lines

Making elements lowercase:

Li( display:inline; )

...or line blocks:

Li( display:inline-block; /* The next two lines for IE6-7 - emulate the behavior of an inline block */ //display:inline; zoom:1; )

Problem

Most browsers separate inline blocks (elements) by indentation. For ease of perception, I colored the blocks a little.

Oops! What kind of indentations? I didn't prescribe anything like that!

Let's agree that hereinafter I will simply write “inline block”, and mean “inline block ( :inline-block) or just inline element (display:inline)”, since they have a completely common problem and it is also treated in the same way.

Who are we treating?

So the inline blocks now have mysterious indentations. Of course, this doesn't just apply to lists. A group located in a row, for example, “ov,” will behave the same way.

To be fair, it should be noted that IE6 and IE7 will render the whole thing without indentation:

This is how I want all browsers to display!

We will not go into details of the question of who is right and who is wrong (read - crookedly supports standards), we will simply achieve cross-browser compatibility. It’s very convenient when the behavior is predictable - I didn’t set any indents, which means I don’t need to draw them!

In fact, everything is simple - to remove indents, you need to understand where they came from!

Where do the indentations come from?

And it's not difficult to understand. You just need to write the tags in one line:

• Storki.
• Just
• lines

Miracles! The indentations disappeared by themselves! Conclusion: they generate them invisible characters between tags - hyphen or space.

Of course, “writing everything on one line,” although it is a cross-browser solution to the problem, is not considered here, for obvious reasons (who writes without indents?). We are looking for other ways.

Down with indentations!

Since the indentation is created by characters from the container, a sensible idea would be to “neutralize” these characters - set them to :0; (the main thing is not to forget that this property is inherited and to interrupt it for the descendants themselves):

Ul( font-size:0; ) li( font-size:14px; display:inline; )

Perfect solution! The line blocks are really pressed against each other. There is still a small cosmetic problem: in some browsers (for example, Opera 9.5 and earlier) there is an indentation at the top or bottom within the parent (the parent in the picture is filled with a pale gray-green):

The picture has been enlarged so that the vertical indents can be seen

This problem is similar to that described in the article, and is treated in approximately the same way: add :0; (again, don’t forget to overlap with the descendant). So we get:

Ul( font-size:0; line-height:0; ) li( font-size:14px; line-height:normal; /* or another suitable value */ display:inline; )

Is everything fine and dandy now? Not so!

Trouble came from where we didn't expect it

Apparently, these indentations really should be there! There are two ironclad arguments to support this:

1. IE6-7 does not draw them;
2. despite our efforts, Webkit browsers still draw them.

Yes Yes! Both Safari and Chrome, after all the above tricks, deigned to simply reduce the padding from three pixels to one!

Stubborn webkit's don't want to give up!

Update 3.07.2011 by Nick. FF presented another hidden surprise. If you scale the page, sometimes there is an additional 1px padding at the top. This can be cured by adding the display rule: -moz-inline-stack;

Final decision

It was possible to overcome webkit using :-1px. However, no harmful side effects were found (unless, of course, you forget to override the property in descendants).

Final CSS with cross-browser solution for inline elements:

Ul( font-size:0; /* remove horizontal spacing */ line-height:0; /* ...and vertical in some browsers */ letter-spacing:-1px; /* convince webkit's */ ) li ( font-size:14px; /* Don’t forget to restore normal values ​​*/ line-height:normal; letter-spacing:normal; display:inline; )

For inline blocks:

Ul( font-size:0; /* remove horizontal spacing */ line-height:0; /* ...and vertical in some browsers */ letter-spacing:-1px; /* convince webkit's */ ) li ( font-size:14px; /* Don’t forget to restore normal values ​​*/ line-height:normal; letter-spacing:normal; display: -moz-inline-stack!important; display:inline-block; //display:inline ; zoom:1 ;

Don't forget that the zoom property is invalid. Therefore, in combat conditions, take it out and separate CSS, connected using .

Block layout 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 described in detail in this lesson. To the browser, each tag is a container that has content, padding, external margins, as well as a frame. In this lesson we will learn how to make internal and margins, let's consider their main parameters.

The figure below clearly shows the block indent parameters:

As you can see, indents can be made in four directions: top indent (top), bottom indent (bottom), left indent (left) and right indent (right). The units of measurement can be pixels, percentages, and others. CSS units— more about them. This tutorial uses pixels.

Block padding

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

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

IN in this example Internal padding is set separately for each side of the block. In addition, there are several ways to set indentation 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 internal paddings of 7px*/

It's easier to remember the first one and last ways. In the first case, the indents are placed clockwise (top, right, bottom, left) - we can specify any amount of indentation; in the latter case, the indents on all sides will be the same.

Block margins

The property responsible for margins in CSS is 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 the top, left and right, bottom padding*/ padding: 5px 10px; /*describes the top and bottom, right and left padding*/ padding: 7px; /*describes all 7px margins*/

Thus, how to indent in CSS- the question is not difficult, but very relevant. To better understand the information described above, you should remember that there are two properties: padding - internal indents and margin - external indents. Also, as you already know, there are several ways to set indents, you can use them.

In this article I would like to tell you how to correctly place fields(padding) and indentation(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 of the box. And padding is the distance between the border of a block and the border of an adjacent or parent element.

So, if the element's border and background are not specified, then there is no difference, use padding property or margin to set indents, but provided that the width (width) and height (height) of the element are not set and the algorithm for calculating content sizes using the box-sizing property is not changed.

In any case, remember that margins may or may not be included in the width or height of the element. Indents are always set outside the element.

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

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

News ( padding: 20px 25px; )

Thus, if you need 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 indentations on the left and right.

It often happens that all elements within a block have the same padding on the left and right, except for one, which should not have padding at all, for example, due to the background. In this case, you can set negative padding for the element. Then you won’t have to remove fields inside the block for other elements.

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

Taking this into account, we set the indent at the bottom for the title, and the indent at 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 for the news list.

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

Now you need to set the indents between individual news items. Again, please note that the number of news items may vary and there may only be one news item listed.

You can set a top indent for each news except the first one, or a bottom indent for each news except the last one. The first option is preferable because the:first-child pseudo-selector was added in the CSS 2.1 specification and has wider support, unlike 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 placement of margins and indents allows you to flexibly change appearance any block without making changes to styles and without violations in design. The most important thing is to determine which block elements are the main ones ( mandatory), and which ones optional.

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

In this case you can use next way indentation assignments.

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

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

Collapsing vertical margins

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

That is, indentations will overlap, and the indentation between blocks will be equal to largest indentation, and not the amount of indentation. This effect is also called "collapse".

Please note that horizontal indents, unlike vertical ones, do not “collapse”, but are summed up. The fields (padding) are also summed up.

Knowing about the “collapse” of indents, we can use this feature to our advantage. For example, if we need to indent the headings and text inside an article, then for the first level heading we will set the bottom indent to 20px, and for the second level heading the top indent is 20px and the bottom is 10px, and for all paragraphs we set the top indent to 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 arranging margins and indents.

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

Tags: Add tags