Margin 0 auto что это

7

The CSS layout model: borders, boxes, margins and padding

This article covers the CSS layout model in some detail, including box model, borders, margin and padding, and how they all work.

Introduction

At first glance, the CSS layout model is a straightforward affair. Boxes, borders, and margins are fairly simple objects, and CSS syntax provides a simple way to describe their characteristics.

However, browser rendering engines follow a long list of rules laid down in the CSS 2.1 Recommendation, and a few of their own. For this reason, there are a lot of details that need to be understood before advanced techniques can be added to a stylist’s repertoire.

In this article we introduce the CSS properties that manipulate the layout of HTML elements, including their borders, margins, and much more. Coverage will also include some of the rules mentioned above. Advanced column layout and grid-focused techniques are discussed in other articles that explore form layout, floats, clearing, and positioning in greater detail.

Changing composition: CSS margins, borders, and padding

Many HTML elements, such as div elements and headings, are rendered by default to occupy the entire width of the browser canvas and force a terminal linebreak, so that several such elements in series would render in a top-to-bottom stack on the document canvas.

However, HTML elements and the browser styles usually set for them are inadequate to the full range of use cases developers are called upon to consider in their work. The way CSS and HTML work together has been tuned to «fill in the gaps» so that class es and id s can add semantic meaning to markup while style sheet rules can precisely change the layout and presentation of content—perhaps even by canceling out large parts of the browser default styles altogether.

Careful control of whitespace is among a designer’s most important tools — and in the opinion of this author, the single most important. However, the degree of control over whitespace that brings high production values to a site design is absent from default browser stylesheets, which means that stylists typically make frequent use of the margin, border, padding, and other CSS layout properties explained in this article.

Margins, borders, and padding are arranged as shown in Figure 1.

Figure 1: An explicit illustration of the various parts of an element box, labeled with associated CSS properties.

Putting whitespace around an object: the margin-top, margin-right, margin-bottom, margin-left, and margin properties

Margins can be specified singly, or in a shorthand rule. Furthermore, the shorthand rule still allows control of individual borders around an object. Valid values are usually specified in px or em units (pixels or ems). On print-specific stylesheets in , cm , or pt units might be used instead (inches, centimeters or points).

In all cases % (percentage) is a valid value, but needs to be used with care; such values are calculated as a proportion of the parent element’s width, and careless provision of values might have unintended consequences. This challenge is explained in more detail during the discussion of the CSS box model below.

All inline elements except images lack margins, and will not take margin values. For a list of these elements, consult Table 2 below.

Auto margins

Depending upon the circumstances, provision of an auto value instructs the browser to render a margin according to the value provided in its own stylesheet. However, when such a margin is applied to an element with a meaningful width, an auto margin instead causes all of the available space to be rendered as whitespace.

Given the following rule:

A block element of the class narrowWaisted will center itself in the middle of the available canvas.

Or the right margin of an applicable element can be set to some relatively small value, while the left margin is assigned an auto value.

When that’s done, such an element will instead appear nearly flush-right.

Negative margins

All of the margin properties can be assigned negative values. When this is done, an adjacent margin can be effectively «canceled out» to any degree. Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.

For example, consider the following simple div elements:

When styled with the following CSS

It creates the output shown in Figure 2:

Figure 2: The two elements from our simple example. Nothing special to see here.

Here comes the interesting part. Now we’ll add a fairly sizeable negative margin to the top of the bottom element, using the following rule:

This gives us the visual effect of shifting the element up so it overlaps with the heading, as shown in Figure 3.

Figure 3: With a negative margin applied, the bottom element shifts upward and overlaps the heading.

Collapsing margins

In cases where two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied. For example, take the following rule:

If a document including this style rule is rendered literally, the resulting margin between two paragraphs in series wouild be 2.5em , as the sum of the bottom margin of paragraph 1 (1.5em) and the top margin of paragraph 2 (1em). However, due to the application of collapsing margins, the margin between them is only 1.5em .

Lists and headings are peculiar among block elements, so their margins will not be collapsed into the margins of the other block elements.

Demonstration 1

In the text styling article, the typesetting of the opening section of an F. Scott Fitzgerald story was done with many of the tools made available by CSS. For the demonstration in this article, that same page is being put to use again, with some minor changes (principally, the addition of a container element around all of the copy). The text styling is unchanged, but the few layout styles applied to that demonstration have been removed.

For starters, margins will be added to all of the elements that will need them.

New rules:

Adding a border to an object: border properties

There is a border shorthand property, but it’s only useful when you want to provide a complete and consistent border around all four sides of an element. It’s also possible to set the weight (width), style, and color of any of an element’s four possible borders by using any meaningful combination of the following properties:

• border-width
• border-style
• border-color
• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

The border-width properties

These properties behave exactly as one would expect: they assign explicit weight to one or more borders.

The border-width shorthand property accepts values in the same notation as the margin shorthand property, except that percentage values are unsupported. You might well see yourself writing a rule like the following:

The border-style properties

Figure 4: the eight common border styles in action.

The border-style properties commonly accept any of the following values:

• dashed The length of dashes, and the amount of whitespace between them, is determined by the browser.
• dotted The amount of whitespace between dots (which may take on any shape with an aspect ratio of 1) is determined by the browser.
• double The provided width will be divided into thirds and rendered in filled-negative-filled order.
• groove An outset will be rendered immediately inside and flush to an inset .
• inset The border will be shaded to make it appear as if the element to which it is applied is depressed into the canvas.
• none Equivalent to specifying a -width of zero.
• outset The border will be shaded to make it appear as if the element to which it is applied extrudes from the canvas.
• ridge An inset will be rendered immediately inside and flush to an outset .
• solid The border appears as an unbroken, unshaded line.

When the border-style shorthand property is used, it can accept up to four values which are applied in the same fashion as margin shorthand values.

The practice of obscuring a border (rather than omitting it) is handled by the -color properties.

The border-color properties

Finally, it’s possible to set any color on any individual border, with either a single property such as those listed above, or the border-color shorthand property. Refer to the explanation of the the margin shorthand property for details about the results of providing fewer than four values.

Like background-color , border-color can take a value of transparent . This can be useful in dealing with edge cases that require consistent composition but not consistent use of borders.

The border shorthand property and its four cousins, in more detail

Unlike the various -width , -style , and -color border properties, these five properties allow you to define the three characteristics of an object’s four borders, or of any sigle border at a time. Valid border (etc) shorthand values contain any or all of the width, style, and color properties that apply to that border; the only limitation is that you must refer to either one side of an element at a time, or all four at once.

Consider the following border rule:

An element to which the above rule is applied would look exactly like this paragraph.

When a value is omitted from a border shorthand rule, the rendered element will display a default result:

• Border width will be determined by the browser.
• Border style will be solid .
• Border color will be identical to the color applied to the element in question.

Creating rules: the rationale for five border shorthand properties instead of one

The «rules» discussed here are lines drawn through a layout, not directives to follow. Such lines enhance contrast between an element and its neighbouring space, and in many cases they help to create the illusion of depth within a layout. This last result is exemplified by the existence of the inset and outset border styles.

While these same effects can be accomplished by putting borders around all four sides of an element, the ability to draw precisely defined lines in a layout allows its designer considerable control over details.

And why so many properties? They’re just borders, right?

When a layout is created which demands exceptional skill from a stylist, there will be a need to account for edge cases; this was already raised in the earlier discussion of margins.

Because of the way in which site designs are executed, you will encounter many cases where this element or that might have similar structural properties to other elements in a document, but have different presentation requirements. In these situations it makes perfect sense to write one rule for the most common case, and additional rules for each of the edge cases. It’s for this reason that the auto and inherit values exist: to use a default style as an edge case.

In the case of borders, edge cases might well require the alteration of a single characteristic of a border on a single side of an element — and when one wisely follows the KISS Principle, it’s usually best to stick to changing only those details which need to be changed.

Demonstration 2

Certain sections of the document should be given embellishment in the form of rules and borders.

New rules:

When margins alone aren’t enough: padding properties

You will encounter elements with background colours in secondary or accent hues that require gutters between content and margins. In other situations, you’ll need to provide space between borders and the copy near them.

In such cases and many others, you’ll get considerable use from the padding , padding-top , padding-right , padding-bottom , and padding-left properties. These properties insert negative space between the margins or borders of an element and its content. See Figure 1 above for a clear illustration of the relationship between margins, borders, and padding.

These properties behave in exactly the same manner as margin properties, with the following exceptions:

• auto values are functionally useless in references to padding properties.
• Negative padding values are invalid.
• Padding is never collapsed.
• Margin values are not applied to inline elements, but padding values are.

Demonstration 3

Gutters should be provided for the elements to which borders were previously added.

New rules:

Working with element width and height

Most elements can have their dimensions altered as a matter of course. You’ve seen this capability demonstrated earlier in this article, during the discussion of auto margins.

The CSS properties used to manipulate the dimensions of elements are width , height , min-width , max-width , min-height , and max-height . These properties can then be divorced from (or linked to) the dimensions of element contents with the overflow property.

There’s also a clip property which hides parts of an element inside its margins. However, it’s omitted from this article because of its narrow scope of use.

width and height basics

As a rule, width and height produce exactly the results one would expect. However, their use carries some important caveats.

• width and height cannot be applied to inline elements. There are several elements (such as span , strong , and em ) that will ignore the application of width and height values under typical circumstances. A list of these elements can be found in the discussion of element types, later in this article.
• . except for images, which can be assigned width and height even though they are inline elements. The CSS 2.1 Recommendation refers to images as «replaced» elements, which means that the browsers should always treat them as possessing static dimensions. For this reason, those dimensions can be arbitrarily altered.
• width and height are only two of the properties that can influence the functional dimensions of an element. As a result, it’s easy to put yourself in situations where an element is too small (usually too narrow) to hold its content as expected, leading to blowouts. The CSS box model discussion below addresses this issue.
• Rendering bugs in Microsoft Internet Explorer (IE) make it necessary to specify explicit width or height property/value pairs for some elements. There are some peculiarities about IE’s rendering engine that can only be resolved with brute force (see the Glossary). Most of these peculiarities are known and slated to be removed from IE 8, but until that version has replaced its predecessors within the IE install base, this issue will be an inevitable test case. PositionIsEverything.net and the CSS-Discuss Wiki provide ample information about this issue and techniques that work around it.
• Rounding algorithms will, from time to time, cause off-spec differences in layout between browsers which display content via LCD, LED, or CRT ( type=»screen» ) display media. The screen media type ultimately requires all units to be coverted into pixel measurements, which may map differently from one browser to the next.

min-width, max-width, min-height, and max-height

From time to time you will encounter situations in which you need to constrain the size of an element — usually to ensure that a proportionally-sized column will always retain a readable width. The various min- and max- properties answer this requirement. As is the case with width and height , the results one can expect from using these properties are fairly predictable as a matter of course.

However, in the experience of this author, these properties have limited use (although other authors disagree). Like plain old width and height , they’re subject to rounding errors that can deliver entirely unexpected results. More importantly, they are completely unsupported in IE 6, which still holds a considerable market share as of July 2008.

Demonstration 4

auto margins were placed to the left and right of the page container. Now it needs a width for those margin values to make any sense. Furthermore, the plan is to assign a float value to the pullquote, so that’ll get a width, too.

New rules:

overflow: fencing in content, or setting it free

When an element’s width or height are set, it’s sometimes necessary to consider what results are desired in the event that the contents of that element take up more space than is strictly available. This is especially true on sites with both user generated content and strict layout specifications.

The overflow property and its four valid values — visible , hidden , auto , and scroll — are provided to handle such circumstances. Figure 5 illustrates the effect they have when applied to an element whose content spills out of its bounding box.

Figure 5: The effects of the CSS overflow property.

The results of the four overflow values

• visible (default) Contents beyond the available dimensions of an element are displayed without affecting the flow or margins of adjacent elements. Consequently, content of one element may appear to collide with the content of its neighbours. Techniques for avoiding this outcome and special cases caused by rendering issues in IE are discussed in other articles.
• hidden Any content which lies beyond the bounds of an element will be hidden from view.
• auto The dimensions of an element will be constrained just as when the hidden value is used, except that scrollbars will be created as needed to make overflowing content accessible to the visitor.
• scroll Both vertical and horizontal scrollbars will be incorporated into the element, even if they’re not needed.

The CSS box models: fitting everything together

Now that the fundamental layout properties have been covered, it’s time to discover how the width of an element is rendered by the browser according to its CSS properties — and how to keep elements from blowing out your layouts. Some results will make perfect sense, while others will seem horribly counter-intuitive. To complicate matters, there are actually two layout algorithms to consider: the model specified by the World Wide Web Consortium (W3C) in the CSS 2.1 Recommendation, and the one used in older versions of IE.

Choosing the right units for your layout

As in the case of text, elements can be sized with either proportional units such as % or em , or static units like px . Something else to consider is that the browser canvas is always sized at a static value that cannot be assumed without using client-side script code to either retrieve that size, or resize the window — techniques which are ill-suited to the demands of accessibility, usability, and media portability.

The principal rule of sizing elements: mix proportional and static units with care, or not at all

The default value for both width and height is auto , which in Standard English is a directive to «use the available space.» The result for block elements is that their computed width occupies all of that space. With respect to height , elements expand to enclose their content by default.

If you change width and height values, you must then be careful to ensure that the contents of an element will fit (with their margins, borders, and padding) into the width you’ve specified. The easiest way to do this by engaging in the following process:

1. Consider the largest maximum width likely to be available for your layout, given common display resolutions and/or type sizes. As of this writing, this measurement will typically be something around 800 or 1024 pixels. The broader the expected audience of your site, the more likely it is that the smaller of these values should be chosen.
2. Create a container element for your entire document that is set to an expected width less than the width worked out in step #1.
3. Use the same unit type when setting layout properties for the elements within the container element created in step #2.

Choosing the right unit type for layout: advantages and disadvantages

• Best suited to creating highly precise layout grids in two dimensions
• When used in relation to document containers, makes possible layouts that expand or contract according to the size of body copy
• The computed dimensions of elements become easily predictable

• Fractional units might expand or contract with slight differences between browsers
• To achieve the best results, all font-size and line-height values in the document should be set to explicit and predictable values

• Best suited to completely flexible layouts
• Easiest for creating things like equal columns

• Blowout avoidance might require extra container elements
• Might result in unacceptably wide or narrow elements
• Results are highly dependent on context (see discussion of the box models below)

• Offers the greatest amount of control over layout
• Eliminates most cross-browser variation in layout

• Most ill-suited to accessibility and cross-media support requirements
• Most susceptible to blowouts

Table 1: Advantages and disadvantages of the percentage, em, and pixel units in specifying layout properties.

The box model components

The box model is really just a series of directives that define how the various layout specifications of an element interact with one another. The components covered by the box model are:

1. document canvas
2. margins
3. borders
4. padding
5. element widths and heights
6. child element properties

The last of these items in turn includes the other five. However, for simplicity’s sake this section will focus on simple parent-child element relationships, and reserve discussion of multi-level box model interactions for later articles that will delve into the finer points of page layout.

The W3C box model: everything is additive

The basic rule is that the computed width or height of an element is equal to:

margin + border + padding + (width|height)

In many cases the width and/or height will be set to its default value of auto , meaning that the canvas area put aside for content is equal to:

available_canvas — margin — padding — border

In such an equation, available_canvas is itself a discrete (if often auto-computed) value, less the amount of margins, borders and padding. This number is most important for the width of elements, because width calculation errors on the part of a designer will have the undesirable result of causing a horizontal scrollbar to appear in the browser window. Additionally, browsers always place elements at the left margin of the browser canvas that would otherwise overflow beyond the right margin of the browser window, unless instructed to do otherwise.

Consider the following style sheet rule:

As discussed during the explanation of margin properties above, one can expect #myLayoutColumn to center itself within its container element, whether that container is body , or something created by the production team.

Furthermore, if the activation of «strict mode» (through the use of an appropriate !DOCTYPE declaration) causes the W3C box model to be used, one can also expect the computed non-marginal width to be:

.1em + .9em + 50em + .9em + .1em = 52em

In screen media the browser will then take this value, round all of the values separately to the nearest pixel, and render the result accordingly.

Proportional margins and padding in the W3C box model

When the W3C box model is in use, proportional margins and padding are computed relative to the computed width of the containing element. To give one example, if you specify margin: 20% for an element that’s contained within an element that is 800 pixels wide, the margin rendered around the first element will be 160 pixels on all sides (as 20% of 800 is 160).

If that same element is assigned padding: 5% , its computed content width will be 400 pixels:

20% + 5% + 5% + 20% = 50% 0.50 × 800 = 400 800 — 400 = 400

Working with document flow

Upcoming tutorials discuss the creation of multi-column layouts, so there are three CSS properties left to introduce in this article: display , float , and clear .

Element types and the display property

With the exception of html , body , and table parts, each element in the HTML 4.01 Recommendation that relates to primary content has an associated type of inline or block. Each type determines default layout behaviour in different ways:

Inline

• Text and images that immediately follow and/or precede inline elements are rendered on a common baseline with the content of the inline element, unless they’re so long that they would otherwise overlap the edge of the containing element, in which case the inline content will wrap onto a new baseline underneath the first one.
• Lines of text within inline elements are laid out with soft linebreaks as needed (or allowed), except where this behaviour is modified by use of the white-space property.
• margin , width , height , and float properties in style sheet rules applicable to these elements (except img and object ) are ignored.
• Inline elements can only contain text or other inline elements.

Block

• These elements are rendered as discrete blocks within their containers.
• Unless assigned a float value of left or right , will always be rendered with preceding and following linebreaks.
• Linebreaks between nested block elements that don’t have any content between them will typically be collapsed.
• block elements with a width of auto (the default) will always expand to fill the entire width available to them.

The display property has three commonly used values — block , inline , and none — of which two refer to the corresponding element types. The effect of changing an element’s display value is to cause an inline element to behave like a block element, to make a block element behave like an inline one, or to alter the rendering of the document as if the element (and all of its contents) did not exist at all.

As a matter of course, it’s vital to know which elements correspond to which types by default, relationships laid out briefly in Table 2:

Table 2: Frequently used HTML elements and their types. Only margins between two adjacent block elements of the same subtype will collapse.

Demonstration 5

How about removing the «Prologue» annotation from the title, just for demonstration’s sake?

New rules:

Causing elements to flow around others: the float property

A photo is positioned to the left of this paragraph. Practically all of you will see that the following copy flows naturally around it, though some might need first to cease wondering why a well-known science fiction novelist would tape bacon to his cat—even if he was having a slow day. HTML attributes can be used to specify the layout behaviour you see, but in this instance the results were accomplished with CSS.

As one can imagine, the property/value pair that works this magic is float: left; . The finer points of working with floats will be addressed in later articles, but it’s necessary to touch on the basics here. float: right is also a perfectly serviceable property/value pair, and for those occasions when you need to contradict a class assignment that invokes float , you can specify float: none .

The float property does come with a few use instructions:

• A float value will only matter if it’s applied to a block element with an explicit width .
• float , clear , and margin properties all appear together in style sheet rules meant to create columns within a layout.
• Causing a floated element to stretch to the bottom of its container is a tricky matter, but not impossible. The common way to do this is referred to as faux-columns.

Demonstration 6

Placement of a float value on the pullquote has been talked about, so now it gets done and the results can be seen. While we’re at it, let’s add some background color to help distinguish it from the main content.

New rules:

Forcing elements below their floated predecessors: the clear property

Like the float property, the clear property can be assigned one of the left , right , or none values. The both value is also supported.

While the float property directs how the content of subsequent elements should flow around it, the clear property directs how an element should flow around all of its neighbours—in many practical cases, not at all.

Figure 6 illustrates the behaviour of clear: left; in a layout where two initial consecutive elements have been assigned identical height values, and float values of left and right :

Figure 6: clear:left allows the bottom box to clear both columns, as they are the same height.

In the preceding demonstration, the default flow of #cLeftWidget would place it just below the Latin text — that is, between #fLeftWidget and #fRightWidget .

Consider what happens when the first of the same collection of elements is made shorter than its flush-right sibling, as seen in Figure 7.

Figure 7: When the right column is longer than the left column, clear:left will not clear both columns and so clear:both must be used instead.

In the first example, the clear value of the trailing element is set to left in order to make a point: because both of the float ed elements are the same height, the clear ed element will be pushed below both. However, the second example proves that in order to achieve the same result with float ed elements of differing heights, clear: both; must be used.

This discussion of the clear property is intended as a simple introduction to its effects, while later articles discuss the finer points of technique associated with its use.

Summary

Between differences in rendering engines, the need to cover a wide swath of traditionally defined ground, and the inability to predict the certain dimensions of a browser window, the layout of Web documents is fraught with hassles and caveats. However, the common level of CSS support has advanced to the point where Web documents are not hard to get to give decent results across browsers.

See also

External resources

• Bergevin, Holly, and Gallant, John. 2006. Explorer exposed. Position Is Everything. (accessed 1 July 2008).
• Bos, Bert, et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web Consortium. etc. (accessed 30 June 2008).
• Raggett, Dave, et. al. 1999. HTML 4.01 specification. World Wide Web Consortium. etc. (accessed 30 June 2008).
• Raymond, Eric, and Steele, Guy, eds. 2003. Brute force. The Jargon File (Version 4.4.7). (accessed 30 June 2008).
• Scalzi, John. 2006. Clearly you people thought I was kidding. Whatever. (accessed 30 June 2008).

Exercise questions

1. Under which circumstances is it best to use the shorthand margin value, or a single margin property such as margin-top ?
2. When the shorthand margin , padding , and border-width properties are provided with all four values, in what order are those values applied to the four sides of an element?
3. If you want to place a rule under the text of each heading in a document, which property would you use?
4. Which border-style value would you use to give an element an appearance like an interface button?
5. Yes or no: Will specifying a border around an element will also provide for a gutter around the content of that element, by default?
6. If you create an element that isn’t as wide as its container, which property/value pair do you need to set to ensure that the element is horizontally centered within its container?
7. Yes or no: If you place a container element within body and set its width to a value greater than 100% , will the behaviour of the document canvas change?
8. If an image is too large for its containing element, which property/value pair would you use to ensure that your page layout doesn’t blow out, and why?
9. If you assign a display value of block to an a (link) element and give that element a reasonable height and width, how does the mouseover behaviour of that link change in screen display media?
10. Under normal circumstances, a block element expands to fill the width of its container (less margins, borders, and padding). By default, does this behaviour truly change when that element is preceded by a float ed element — or merely appear to change?
11. If you intend to apply a float value to an element, which other property must you also set on that element?
12. If you wanted to make absolutely sure that an element would always expand to fill the width of its container, which property/value pairs would you set?

Attributions

This content was originally published on DevOpera, Opera’s Developer Network. .

margin

CSS свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top , margin-right , margin-bottom и margin-left .

Интерактивный пример

Составные свойства

Данное свойство является сокращением для следующих CSS свойств:

Синтаксис

Свойство margin может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <length> , <percentage> или является ключевым словом auto . Каждое значение может быть положительным, отрицательным или равным нулю.

• Когда определено одно значение, такое значение определено для всех четырёх сторон.
• Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
• Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
• Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).

Значения

Размер отступа как фиксированное значение.

Размер отступа в процентах относительно ширины родительского блока.

Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.

Всё о ключевом слове auto в CSS

В CSS есть ключевое слово auto , которое можно использовать при работе с различными свойствами элементов. Это — свойства, влияющие на позицию, высоту, ширину элементов. Это — свойства, предназначенные для настройки отступов элементов и других их характеристик. У меня появилось желание где-нибудь записать всё то, что я знаю об auto . Например — оформить это всё в виде материала, который мог бы стать справочником для тех, кто интересуется тонкостями использования этого ключевого слова.

Ключевое слово auto имеет особый смысл при использовании его с различными CSS-свойствами. Мы разберём особенности auto , касающиеся применения этого значения к различным свойствам.

Здесь, в первую очередь, нас будут интересовать технические детали работы auto . Поговорим мы и о том, как извлечь максимум пользы из применения этого свойства. Тут вы найдёте и заметки о сценариях использования auto , и примеры.

Свойство width: auto

Исходной шириной блочных элементов, таких, как <div> или <p> , является значение auto . Это приводит к тому, что такие элементы занимают всё горизонтальное пространство содержащего их блока.

«Ширина блока, содержащего элемент» — это, в соответствии со спецификацией CSS, значение, вычисляемое по следующей формуле:

Когда ширина элемента задана значением auto , у него могут быть настроены такие свойства, как margin , padding , border , и он, при этом, не будет больше своего родительского элемента. Шириной блока, ограничивающего содержимое блочного элемента, будет размер содержимого за вычетом ширины его частей, задаваемых свойствами margin (поле, внешний отступ), padding (внутренний отступ) и border (граница).

Сравнение width: auto и width: 100%

Рассмотрим, в качестве примера, особенности устройства вышеприведённых макетов.

Тут всё выглядит как надо, содержимое ограничено родительским элементом.

Элемент находится в пределах родительского элемента

А что произойдёт в том случае, если указать, что ширина элемента ( width ) должна быть задана не в виде значения auto , а как 100% ? При таком подходе элемент займёт 100% ширины родительского элемента, к которой будет добавлено пространство, отводимое на правое и левое поля. Вот соответствующий стиль:

А вот что получится после его применения к элементу.

Элемент выходит за пределы родительского элемента (направление текста — ltr)

Ширина элемента составляет 568px . Она вычисляется так:

Если свойство direction установлено в значение ltr , то значение margin-right будет полностью игнорироваться. В нашем случае именно это и происходит. Однако если в direction записано rtl , игнорироваться будет margin-left .

Элемент выходит за пределы родительского элемента (направление текста — rtl)

Здесь можно поэкспериментировать с кодом примера.

▍Сценарии использования width: auto

Для того чтобы как следует разобраться со значением auto , недостаточно рассказа об основах. Поэтому я провёл некоторые изыскания, направленные на то, чтобы показать сценарии практического использования свойства width: auto .

Разная ширина элементов в мобильной и настольной версиях страницы

Мобильный и настольный варианты приложения

Имеется группа кнопок. Нужно, чтобы в мобильной версии приложения они были бы расположены рядом друг с другом (элемент, заключающий в себе кнопку, должен занимать 50% родительского элемента). В настольной версии приложения каждая кнопка должна занимать всю ширину контейнера-родителя. Как это сделать?

Для того чтобы разместить кнопки рядом друг с другом в мобильном варианте страницы, я воспользовался flexbox-макетом. Вот соответствующий CSS:

В настольной версии мне нужно, чтобы кнопки занимали бы всю ширину родительского элемента. Тут может возникнуть соблазн использовать конструкцию width: 100% . Правда? Но есть и более удачное решение:

Так как .group__item — это блочный элемент, использование width: auto приводит к тому, что этот элемент отлично заполняет собой место, доступное в его родительском элементе.

Вот рабочий вариант этого примера.

Свойство height: auto

Если рассматривать работу со свойством height , задающим высоту элементов, то всё выглядит иначе. Высота элемента, при применении значения auto , соответствует высоте содержимого элемента.

Рассмотрим следующий пример:

Для того чтобы элемент с классом .item занял бы всю высоту контейнера, можно воспользоваться одним из следующих приёмов:

1. Можно задать элементу с классом .wrapper фиксированную высоту, а затем добавить к стилю элемента .item свойство height: 100% .
2. Можно воспользоваться для элемента .wrapper flexbox-макетом, благодаря чему дочерний элемент .item будет, по умолчанию, растянут до размеров родительского элемента.

Родительский и дочерний элементы

Поля и ключевое слово auto

Полями (внешними отступами) чаще всего пользуются для горизонтальной центровки элементов, ширина которых известна.

Элемент, который надо выровнять по центру

Синий прямоугольник нуждается в горизонтальном выравнивании по центру. Для этой цели можно воспользоваться следующим стилем:

Обратимся к спецификации CSS:

Если свойства ‘margin-left’ и ‘margin-right’ установлены в значение ‘auto’, ширина полей оказывается одинаковой. Это приводит к горизонтальной центровке элемента относительно краёв включающего его в себя блока.

Поля элемента имеют одинаковую ширину

Вот демонстрация этого примера.

▍Использование свойства margin: auto для абсолютно позиционированных элементов

Центрованный элемент

Ещё один, менее распространённый, сценарий применения значения auto заключается в центровке абсолютно позиционированных элементов с использованием конструкции margin: auto . Если имеется элемент, который нужно отцентровать внутри родительского элемента и по горизонтали, и по вертикали, может показаться, что для этого надо воспользоваться свойством translateX или translateY .

Для того чтобы свойство margin: auto позволило бы нам соответствующим образом выровнять элемент, нужно, чтобы были бы выполнены следующие условия:

1. Заданы ширина и высота элемента.
2. Задано свойство элемента position: absolute .

Вот демонстрация этой методики выравнивания элементов.

Flexbox-макеты и автоматическая настройка полей

Использование автоматически настраиваемых полей может, в некоторых случаях, оказаться весьма полезным приёмом. Если дочерний элемент имеет поле, размеры которого заданы с использованием значения auto , он, в родительском элементе, будет максимально смещён в сторону, противоположную настроенному полю. Например, если flex-элементу назначено свойство margin-left: auto , он будет максимально смещён вправо.

Посмотрим на следующий макет. Тут есть два прямоугольных дочерних элемента, находящихся в родительском flexbox-элементе.

Пара элементов во flexbox-контейнере

Нам нужно, чтобы элемент №2 был бы перемещён к правой границе контейнера. Для этого отлично подходит использование значения auto для свойства margin-left :

Вот что получилось после применения такого стиля.

Элемент №2 перемещён к правому краю контейнера

Надо отметить, что этот приём работает и при вертикальном выравнивании элементов. Применим в данном примере следующий стиль элемента №2:

Вот что получится.

Элемент №2 перемещён к нижнему краю контейнера

Кроме того, если имеется лишь один дочерний элемент, то для того, чтобы выровнять его и по горизонтали, и по вертикали, можно воспользоваться свойством margin: auto . Предположим, в контейнере имеется лишь элемент №1, который нужно выровнять именно так. Для этого воспользуемся таким стилем:

Этого достаточно для центровки элемента.

Элемент №1 выровнен по центру контейнера

▍Свойство flex и значение auto

При разработке flexbox-макетов можно пользоваться, для дочерних элементов, свойством flex: auto . Что означает подобная конструкция? Дело в том, что когда у дочернего элемента имеется свойство flex: auto , это равносильно тому, что элементу назначен стиль flex: 1 1 auto , аналогичный следующей конструкции:

Вот что об этом сказано на MDN: «Размеры элемента определяются в соответствии с его свойствами width и height , но элемент может растягивается, занимая дополнительное свободное пространство, доступное во flex-контейнере. Элемент, для того, чтобы поместиться в контейнер, может и сжимается до своего минимального размера. Это аналогично установке стиля flex: 1 1 auto ».

Другими словами, размер элемента со свойством flex: auto будет задан, основываясь на его ширине и высоте. Но этот элемент может растягиваться или сжиматься в зависимости от того, какое пространство доступно ему в контейнере. Я об этом не знал до тех пор, пока не занялся исследованиями для этой статьи.

Как обычно, рассмотрим пример.

А вот — результат.

Использование flex: auto

Вот рабочий вариант этого примера.

Grid-макеты и значение auto

▍Использование значения auto при настройке столбцов

Использование стиля grid-template-columns: auto 1fr 1fr

При разработке Grid-макетов можно использовать значение auto при настройке столбцов. Это будет означать, что ширина столбцов будет зависеть от размеров их содержимого. Вот что я имею в виду:

▍Grid-макеты и использование значения auto для настройки полей

При использовании Grid-макетов значение auto может быть использовано для настройки полей элементов. Делается это для получения результатов, похожих на те, что достигались при использовании auto во Flexbox-макетах. Если мы работаем с Grid-макетом, и один из элементов сетки имеет, например, стиль margin-left: auto , он будет перемещён в правую часть макета, а его ширина будет подобрана на основе размеров его содержимого.

Рассмотрим следующий пример.

Нам нужно, чтобы ширина элемента Item 1 зависела бы от его содержимого, а не от доступного ему пространства сетки. Для этого мы можем воспользоваться следующим стилем:

Вот результат применения этого стиля.

Ширина элемента зависит от его содержимого

▍RTL-макеты

Стоит отметить, что использование свойств margin-left: auto или margin-right: auto хорошо показывает себя для LTR-макетов (для макетов, в которых содержимое расположено слева направо), например, для таких, которые используются для вывода текстов, написанных на английском. Но знайте о том, что на многоязычных сайтах эти значения меняются местами. Ещё лучше, и я бы порекомендовал поступать именно так, пользоваться в таких макетах Flexbox- или Grid-свойствами, делая это в тех случаях, когда поставленной цели можно достичь с их помощью. Если этого с помощью таких свойств добиться нельзя, прибегайте к настройке margin-свойств с использованием auto только в крайнем случае. Вместо них лучше применять логические свойства CSS.

Свойство overflow

Работая с элементами веб-страниц, нам нужно знать о размерах содержимого, которое способны вмещать эти элементы. Если содержимое оказывается больше того, что способен вместить элемент, нужно, для работы с таким содержимым, показать полосу прокрутки.

Для решения этой задачи можно попытаться воспользоваться следующим стилем:

Но при таком подходе полоса прокрутки может появиться даже в том случае, если в элементе выводится содержимое, размер которого не превышает размеров элемента. Вот пример.

Элемент, которому назначен стиль overflow-y: scroll

В браузере Chrome на платформе Windows полоса прокрутки выводится всегда. Это — пример неправильного поведения элемента, которое способно запутать пользователя.

Использование вместо этого значения auto позволяет добиться того, что полоса прокрутки будет выводиться лишь в тех случаях, когда высота содержимого превышает высоту контейнера.

На MDN об этом сказано следующее: «Зависит от пользовательского агента. Если содержимое помещается в область элемента, соответствующую внутреннему пространству элемента, оно выглядит так же, как содержимое, выводимое в режиме visible , но при этом создаётся новый блочный контекст форматирования. Настольные браузеры выводят полосы прокрутки в том случае, если размеры содержимого превышают размеры элемента».

Свойства, отвечающие за позиционирование элементов

CSS-свойства, отвечающие за позиционирование элементов, такие, как top , right , bottom и left , поддерживают значение auto . То, о чём я хочу сейчас рассказать, я узнал в ходе написания этой статьи.

Рассмотрим следующий макет.

Демонстрационный макет

Здесь имеется родительский элемент с настроенным свойством padding , задающим внутренний отступ. В этом элементе расположен ещё один элемент, дочерний. Дочерний элемент позиционирован абсолютно, но его свойства, отвечающие за позиционирование, не настроены. Вот стили:

Дело в том, что в CSS у каждого свойства имеется некое исходное значение (значение, задаваемое по умолчанию). Если исследовать дочерний элемент и взглянуть на вычисленные стили, то каким будет значение его свойства left ?

Исследование вычисленных стилей дочернего элемента

Значение, задаваемое по умолчанию для свойства left — это 16px . Откуда оно взялось, если мы его даже не задавали? Причина этого заключается в том, что свойства абсолютно позиционированного элемента согласуются с его ближайшем родителем, у которого задано свойство position: relative . У родительского элемента есть свойство padding: 16px . Это приводит к тому, что дочерний элемент размещается в 16 пикселях от верхней и левой сторон родительского элемента. Интересно, правда?

Теперь у вас может появиться вопрос о том, какая нам от этого польза. Предлагаю с этим разобраться.

Представим, что дочерний элемент надо разместить в 100px от левой границы родительского элемента при просмотре страницы на маленьких экранах, а на больших экранах можно разместить элемент там, где он располагался бы при применении значений, задаваемых по умолчанию.

Вот стиль, подходящий для маленьких экранов:

Как сбросить значение свойства left при просмотре страницы на больших экранах? Причём, значение left: 0 тут использовать нельзя, так как это приведёт к тому, что дочерний элемент прижмётся к краю родительского элемента, а нам это не нужно. Взгляните на макет страницы, показанный ниже. Он разъясняет мою мысль.

Дочерний элемент ведёт себя неправильно

Для сброса свойств позиционирования дочернего элемента следует использовать конструкцию left: auto . На MDN об этом говорится следующее: «Элемент размещается по горизонтали так, как он должен был бы быть позиционирован в том случае, если бы был статическим элементом».

Это означает, что при размещении элемента будет учитываться свойство padding родительского элемента, и будет обеспечиваться то, что дочерний элемент не «прилипнет» к краю родительского элемента.

То же самое применимо и к свойству top . Вычисленные значения свойств right и bottom , задаваемые по умолчанию, эквивалентны, соответственно, ширине и высоте элемента.

Вот демонстрационный проект к этому разделу.

Примеры использования значения auto

Сразу скажу, что приведённые здесь примеры не охватывают всех возможностей значения auto , но я надеюсь, что то, о чём я расскажу, вам пригодится.

▍Стрелка всплывающей подсказки

При создании всплывающих подсказок нужно, чтобы у них была бы стрелка, указывающая на тот объект, к которому относится подсказка. Так эти подсказки оказываются более понятными. В том случае, если мы занимаемся разработкой дизайн-системы, нам нужно предусмотреть разные состояния подсказок. Например, подсказки со стрелкой, указывающей налево, и со стрелкой, указывающей направо.

Стрелки подсказок, направленные в разных направлениях

Обратите внимание на то, что я воспользовался свойством left: auto для переопределения свойства left: -15px в исходной реализации. И, чтобы вы знали, подобное используется весьма часто. Поэтому я порекомендовал бы вместо вышеописанного подхода пользоваться следующим:

Используя значение 100% , мы уходим от применения жёстко заданного значения (ширины стрелки), которое может привести к неправильной работе системы в том случае, если изменится размер стрелки. Это решение лучше приспособлено к возможным будущим изменениям.

▍Компонент-карточка

Возможно, в вашем проекте имеется компонент-карточка, на котором, в левом верхнем углу расположен какой-нибудь значок. Он может играть декоративную роль, а может представлять собой кнопку для выполнения некоего действия. Вне зависимости от роли значка компонент нужно проектировать так, чтобы значок можно было бы расположить и в его левом верхнем углу, и в его правом верхнем углу. Вот как это выглядит.

Компонент-карточка со значком, который расположен в разных углах

Используя свойство left: auto можно легко сбросить значение свойства, заданного в его базовой реализации. Вот CSS-код:

▍Flexbox-макеты и значение auto свойства margin

Flexbox-макеты дают веб-разработчику поистине безграничные возможности. Комбинируя возможности таких макетов с полями, при настройке которых используется значение auto , мы можем создавать весьма мощные макеты.

Рассмотрим следующий пример.

Автоматическая настройка полей элементов

Тут имеется вертикальный контейнер, содержащий заголовок элемента, его описание и кнопку, расположенную справа. Нам нужно, чтобы кнопка была бы привязана к правой части контейнера.

Готово! Использование свойства margin-left: auto позволяет поместить кнопку в правом верхнем углу элемента. А ещё приятнее то, что мы можем воспользоваться логическими CSS-свойствами в том случае, если разрабатываем многоязычный сайт. CSS-код будет примерно таким:

Если вы хотите больше узнать о RTL-стилизации — вот полезный ресурс, посвящённый этой теме.

▍Grid-макеты и значение auto свойства margin

Настраивая поля Grid-элементов, можно задавать фиксированные и процентные значения, а также — можно пользоваться значением auto . Меня особенно интересует значение auto . Взгляните на следующий макет.

Вот фрагмент разметки:

Мне хотелось бы выровнять подписи, элементы label , по левому краю полей для ввода данных (элементов input ). Для того чтобы это сделать, нужно применить следующий стиль:

Применение этого стиля приведёт к результату, показанному на следующем рисунке.

Выравнивание подписей по левому краю полей для ввода данных

▍Проектирование модальных окон

Модальное окно

Работая над дизайном модальных окон важно учитывать то, что содержимое, которое понадобится отобразить в окне, может целиком в него не поместиться. Для того чтобы окно нормально работало бы в такой ситуации, можно воспользоваться следующим стилем:

Благодаря такому стилю полоса прокрутки появится только в том случае, если содержимое окна окажется достаточно большим.

Итоги

В этом материале мы рассмотрели особенности применения ключевого слова auto в CSS. Надеемся, вам пригодится то, о чём вы сегодня прочли.

Уважаемые читатели! В каких ситуациях вы пользуетесь значением auto в CSS?

What does auto do in margin: 0 auto?

I can’t seem to understand what auto does. I know it sometimes has the effect of centring objects.

8 Answers 8

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it’s parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there’s 50px of free space to share between margin-left and margin-right :

Which would give:

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.