Главная » Языки программирования

Css margins one line

На чтение 7 мин
Содержание
  1. margin
  2. Try it
  3. Constituent properties
  4. Syntax
  5. Values
  6. Description
  7. Horizontal centering
  8. Margin collapsing
  9. Formal definition
  10. Formal syntax
  11. Examples
  12. Simple example
  13. HTML
  14. CSS
  15. More examples
  16. Specifications
  17. Browser compatibility
  18. See also
  19. Found a content problem with this page?
  20. margin
  21. Аргументы
  22. CSS Margins
  23. CSS Margins
  24. Margin — Individual Sides
  25. Example
  26. Margin — Shorthand Property
  27. Example
  28. Example
  29. Example
  30. Example
  31. The auto Value
  32. Example
  33. The inherit Value
  34. Example
  35. All CSS Margin Properties
  36. CSS margin Property
  37. Definition and Usage
  38. Browser Support
  39. CSS Syntax
  40. Property Values
  41. Margin Collapse
  42. Example
  43. More Examples
  44. Example
  45. Example
  46. Example
  47. margin-inline
  48. Try it
  49. Constituent properties
  50. Syntax
  51. Values
  52. Formal definition
  53. Formal syntax
  54. Examples
  55. Setting inline start and end margins
  56. CSS
  57. HTML
  58. Result
  59. Specifications
  60. Browser compatibility
  61. See also
  62. Found a content problem with this page?
  63. MDN
  64. Support
  65. Our communities
  66. Developers

margin

The margin CSS shorthand property sets the margin area on all four sides of an element.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Apply to all four sides */ margin: 1em; margin: -3px; /* top and bottom | left and right */ margin: 5% auto; /* top | left and right | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* Global values */ margin: inherit; margin: initial; margin: revert; margin: revert-layer; margin: unset;

The margin property may be specified using one, two, three, or four values. Each value is a , a , or the keyword auto . Negative values draw the element closer to its neighbors than it would be by default.

  • When one value is specified, it applies the same margin to all four sides.
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom.
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

Values

The size of the margin as a fixed value.

The size of the margin as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode ) of the containing block.

The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

Description

This property can be used to set a margin on all four sides of an element. Margins create extra space around an element, unlike padding , which creates extra space within an element.

The top and bottom margins have no effect on non-replaced inline elements, such as or .

Horizontal centering

To center something horizontally in modern browsers, you can use display : flex; justify-content : center; .

However, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use margin: 0 auto; .

Margin collapsing

Elements’ top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins. See Mastering margin collapsing for more information.

Читайте также:  nth-child

Formal definition

  • margin-bottom : 0
  • margin-left : 0
  • margin-right : 0
  • margin-top : 0
  • margin-bottom : the percentage as specified or the absolute length
  • margin-left : the percentage as specified or the absolute length
  • margin-right : the percentage as specified or the absolute length
  • margin-top : the percentage as specified or the absolute length

Formal syntax

Examples

Simple example

HTML

div class="center">This element is centered.div> div class="outside">This element is positioned outside of its container.div>

CSS

.center  margin: auto; background: lime; width: 66%; > .outside  margin: 3rem 0 0 -3rem; background: cyan; width: 66%; >

More examples

margin: 5%; /* All sides: 5% margin */ margin: 10px; /* All sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: 10px margin */ /* left and right: 3% margin */ /* bottom: -1em margin */ margin: 10px 3px 30px 5px; /* top: 10px margin */ /* right: 3px margin */ /* bottom: 30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* Box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* Box is horizontally centered */

Specifications

Browser compatibility

BCD tables only load in the browser

See also

  • Introduction to the CSS basic box model
  • Margin collapsing
  • margin-top , margin-right , margin-bottom , and margin-left
  • The mapped logical properties: margin-block-start , margin-block-end , margin-inline-start , and margin-inline-end and the shorthands margin-block and margin-inline

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

margin

Свойство margin задает все свойства отступов в одной строке. Это свойство может иметь от одного до четырех значений.

* margin:10px 5px 15px 20px; — верхний отступ 10px — правый отступ 5px — нижний отступ 15px — левый отступ 20px

* margin:10px 5px 15px; — верхний отступ 10px — правый и левый отступы 5px — нижний отступ 15px

* margin:10px 5px; — верхний и нижний отступы 10px — правый и левый отступы 5px

* margin:10px; — все четыре отступа 10px

Значение по умолчанию: 0
Наследуется: нет
Версия: CSS1

Аргументы

Значение Описание
auto Браузер рассчитывает отступ
значение Определяет отступ в пикселях или других единицах измерения CSS
% Определяет отступ в % отношении
inherit Значение должно быть унаследовано от элемента родителя

Источник

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin — Individual Sides

CSS has properties for specifying the margin for each side of an element:

All the margin properties can have the following values:

  • auto — the browser calculates the margin
  • length — specifies a margin in px, pt, cm, etc.
  • % — specifies a margin in % of the width of the containing element
  • inherit — specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

Margin — Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

If the margin property has four values:

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

    Example

    Use the margin shorthand property with four values:

    If the margin property has three values:

    • margin: 25px 50px 75px;
      • top margin is 25px
      • right and left margins are 50px
      • bottom margin is 75px

      Example

      Use the margin shorthand property with three values:

      If the margin property has two values:

      • margin: 25px 50px;
        • top and bottom margins are 25px
        • right and left margins are 50px

        Example

        Use the margin shorthand property with two values:

        If the margin property has one value:

        Example

        Use the margin shorthand property with one value:

        The auto Value

        You can set the margin property to auto to horizontally center the element within its container.

        The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

        Example

        The inherit Value

        Example

        div <
        border: 1px solid red;
        margin-left: 100px;
        >

        All CSS Margin Properties

        Property Description
        margin A shorthand property for setting all the margin properties in one declaration
        margin-bottom Sets the bottom margin of an element
        margin-left Sets the left margin of an element
        margin-right Sets the right margin of an element
        margin-top Sets the top margin of an element

        Источник

        CSS margin Property

        Set the margin for all four sides of a

        element to 35 pixels:

        More «Try it Yourself» examples below.

        Definition and Usage

        The margin property sets the margins for an element, and is a shorthand property for the following properties:

        If the margin property has four values:

        • margin: 10px 5px 15px 20px;
          • top margin is 10px
          • right margin is 5px
          • bottom margin is 15px
          • left margin is 20px

          If the margin property has three values:

          • margin: 10px 5px 15px;
            • top margin is 10px
            • right and left margins are 5px
            • bottom margin is 15px

            If the margin property has two values:

            If the margin property has one value:

            Note: Negative values are allowed.

            Default value: 0
            Inherited: no
            Animatable: yes, see individual properties. Read about animatable Try it
            Version: CSS1
            JavaScript syntax: object.style.margin=»100px 50px» Try it

            Browser Support

            The numbers in the table specify the first browser version that fully supports the property.

            CSS Syntax

            Property Values

            Value Description Demo
            length Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units Demo ❯
            % Specifies a margin in percent of the width of the containing element Demo ❯
            auto The browser calculates a margin Demo ❯
            initial Sets this property to its default value. Read about initial
            inherit Inherits this property from its parent element. Read about inherit

            Margin Collapse

            Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

            This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

            Look at the following example:

            Example

            In the example above, the

            element has a top and bottom margin of 20px.

            More Examples

            Example

            Set the margin for a

            element to 35 pixels for top and bottom, and to 70 pixels for right and left:

            Example

            Set the margin for a

            element to 35 pixels for top, 70 pixels for right and left, and to 50 pixels for bottom:

            Example

            Set the margin for a

            element to 35 pixels for top, 70 pixels for right, 50 pixels for bottom, and to 90 pixels for left:

            Источник

            margin-inline

            The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element’s writing mode, directionality, and text orientation.

            Try it

            Constituent properties

            This property is a shorthand for the following CSS properties:

            Syntax

            /* values */ margin-inline: 10px 20px; /* An absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: revert; margin-inline: revert-layer; margin-inline: unset;

            This property corresponds to the margin-top and margin-bottom , or the margin-right and margin-left properties, depending on the values defined for writing-mode , direction , and text-orientation .

            The margin-inline property may be specified using one or two values.

            • When one value is specified, it applies the same margin to both start and end.
            • When two values are specified, the first margin applies to the start, the second to the end.

            Values

            The margin-inline property takes the same values as the margin property.

            Formal definition

            • margin-inline-start : 0
            • margin-inline-end : 0
            • margin-inline-start : if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
            • margin-inline-end : if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto

            Formal syntax

            Examples

            Setting inline start and end margins

            CSS

            div  background-color: yellow; width: 120px; height: auto; border: 1px solid green; > p  margin: 0; margin-inline: 20px 40px; background-color: tan; > .verticalExample  writing-mode: vertical-rl; >

            HTML

            div> p>Example textp> div> div class="verticalExample"> p>Example textp> div>

            Result

            Specifications

            Browser compatibility

            BCD tables only load in the browser

            See also

            Found a content problem with this page?

            This page was last modified on Jul 18, 2023 by MDN contributors.

            Your blueprint for a better internet.

            MDN

            Support

            Our communities

            Developers

            Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
            Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

            Источник

Оцените статью
© 2023 Программирование