---
title: CSS Margins
description: "> Ирмэг(margins)  нь аливаа тодорхойлсон хүрээний гадна элементүүдийн эргэн тойрон дахь орон зайг бий болгоход ашиглагддаг. This element has a margin of 70px. ## CSS Margins CSS `margin` шинж чанар нь аливаа тодорхойлсон хүрээний гадна элементүүдийн эргэн тойрон дахь орон…"
url: "https://apprentice.mn/docs/css-margins/"
updated: "2021-08-02"
category: CSS
---

# CSS Margins

> Ирмэг(margins)  нь аливаа тодорхойлсон хүрээний гадна элементүүдийн эргэн тойрон дахь орон зайг бий болгоход ашиглагддаг.

      This element has a margin of 70px.

## CSS Margins

CSS `margin` шинж чанар нь аливаа тодорхойлсон хүрээний гадна элементүүдийн эргэн тойрон дахь орон зайг бий болгоход ашиглагддаг.

CSS -ийн тусламжтайгаар та ирмэгийг бүрэн хянах боломжтой болно. Элементийн тал бүрийн ирмэгийг (дээд, баруун, доод, зүүн) тохируулах шинж чанарууд байдаг.

## Margin – Individual Sides

CSS нь элементийн тал бүрийн ирмэгийг тодорхойлох шинж чанар юм.

- `margin-top`
- `margin-right`
- `margin-bottom`
- `margin-left`

Бүх маржингийн шинж чанарууд дараахь утгуудтай байж болно.

- авто – хөтөч нь маржинг тооцоолно
- урт- ирмэгийг px, pt, cm гэх мэтээр тодорхойлно.
- %- агуулсан элементийн өргөний % -ийн ирмэгийг зааж өгнө
- өвлөх – маржин нь эх элементээс өвлөгдөх ёстойг зааж өгнө

**Зөвлөгөө**: Сөрөг утгыг зөвшөөрдөг.

Элементийн дөрвөн талд өөр өөр ирмэгийг тохируулна уу:

     `p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}`

## Margin – Shorthand Property

Кодыг богиносгохын тулд маржингийн бүх шинж чанарыг нэг шинж чанарт зааж өгөх боломжтой.

`margin` хөрөнгө нь дараахь хувийн үл хөдлөх хөрөнгийн богино хэмжээний өмч юм.

- `margin-top`
- `margin-right`
- `margin-bottom`
- `margin-left`

So, here is how it works:

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

###  

Use the margin shorthand property with four values:

      `p {
  margin: 25px 50px 75px 100px;
}`

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

###  

Use the margin shorthand property with three values:

      `p {
  margin: 25px 50px 75px;
}`

If the `margin` property has two values:

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

###  

Use the margin shorthand property with two values: 

      `p {
  margin: 25px 50px;
}`

If the `margin` property has one value:

- **margin: 25px;**
  - all four margins are 25px

###  

Use the margin shorthand property with one value

      `p {
  margin: 25px;
}`

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

###  

Use margin: auto:

      `div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}`

## The inherit Value

This example lets the left margin of the <p class=”ex1″> element be inherited from the parent element (<div>):

###  

Use of the inherit value:

      `div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-margins%2F&linkname=CSS%20Margins](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-margins%2F&linkname=CSS%20Margins)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-margins%2F&linkname=CSS%20Margins](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-margins%2F&linkname=CSS%20Margins)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-margins%2F&linkname=CSS%20Margins](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-margins%2F&linkname=CSS%20Margins)[https://www.addtoany.com/share](https://www.addtoany.com/share)