CSS ਮਾਰਜਿਨ

ਇਸ ਮੂਲੇਕੰਮ ਦਾ ਮੈਰਜਿਨ 70px ਹੈ。

亲自试一试

CSS ਮਾਰਜਿਨ

CSS margin ਪ੍ਰਾਪਰਟੀ ਨੇ ਕਿਸੇ ਨਿਰਧਾਰਿਤ ਬੋਰਡਰ ਤੋਂ ਬਾਹਰ, ਮੂਲੇਕੰਮ ਦੇ ਚੁੱਪ ਦੇ ਅੰਦਰ ਸਥਾਨ ਬਣਾਉਂਦੀ ਹੈ。

CSS ਰਾਹੀਂ, ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੈਰਜਿਨ ਨੂੰ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ। ਕੁਝ ਪ੍ਰਾਪਰਟੀਆਂ ਮੂਲੇਕੰਮ ਦੇ ਹਰ ਪਾਸੇ (ਉੱਪਰ, ਸੱਜੇ, ਨੀਚੇ ਅਤੇ ਸੱਦੇ) ਦੇ ਮੈਰਜਿਨ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ。

Margin - ਵਿਲੱਖਣ ਪਾਸੇ

CSS ਮੂਲੇਕੰਮ ਦੇ ਹਰ ਪਾਸੇ ਲਈ ਮੈਰਜਿਨ ਸੈਟ ਕਰਨ ਲਈ ਪ੍ਰਾਪਰਟੀਆਂ ਰੱਖਦਾ ਹੈ:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

ਸਾਰੇ ਮੈਰਜਿਨ ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਹੇਠ ਲਿਖੇ ਕੀਮਤਾਂ ਸੈਟ ਕਰ ਸਕਦੇ ਹਨ:

  • auto - ਬਰਾਉਜ਼ਰ ਮੈਰਜਿਨ ਲਈ ਕੰਕਲਤ ਕਰੇ
  • length - px, pt, cm ਆਦਿ ਇਕਾਈਆਂ ਵਿੱਚ ਮੈਰਜਿਨ ਸੈਟ ਕਰੋ
  • % - ਸਮੇਟੀ ਮੂਲੇਕੰਮ ਦੀ ਚੌਕੇ ਕੀਮਤ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਦੇ ਰੂਪ ਵਿੱਚ ਮੈਰਜਿਨ
  • inherit - ਪੈਰੰਟ ਮੂਲੇਕੰਮ ਤੋਂ ਮੈਰਜਿਨ ਲੈਣ ਦਾ ਸੁਝਾਅ

ਸੁਝਾਅ:ਨੈਗਟਿਵ ਕੀਮਤਾਂ ਪ੍ਰਵਾਨ ਹਨ。

实例

<p> ਮੂਲੇਕੰਮ ਦੇ ਸਾਰੇ ਚਾਰ ਪਾਸੇ ਵੱਖ-ਵੱਖ ਮੈਰਜਿਨ ਸੈਟ ਕਰੋ:

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

亲自试一试

Margin - ਸ਼ਾਰਟ ਪ੍ਰਾਪਰਟੀ

ਕੋਡ ਘਟਾਉਣ ਲਈ, ਇੱਕ ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਸਾਰੇ ਬਾਹਰੀ ਮੈਰਜਿਨ ਪ੍ਰਾਪਰਟੀਆਂ ਸੈਟ ਕਰ ਸਕਦੇ ਹਨ。

margin ਪ੍ਰਾਪਰਟੀ ਹੇਠ ਲਿਖੇ ਬਾਹਰੀ ਮੈਰਜਿਨ ਪ੍ਰਾਪਰਟੀਆਂ ਦੇ ਸ਼ਾਰਟ ਪ੍ਰਾਪਰਟੀ ਹਨ:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

ਕੰਮ ਕਰਨ ਦਾ ਮੁੱਖ ਮੰਤਰ ਇਹ ਹੈ:

ਜੇਕਰ margin ਪ੍ਰਾਪਰਟੀ ਨੇ ਚਾਰ ਕੀਮਤਾਂ ਸੈਟ ਕੀਤੀਆਂ ਹਨ:

  • margin: 25px 50px 75px 100px;
    • ਉੱਪਰ ਬਾਹਰੀ ਮੈਰਜਿਨ 25px ਹੈ
    • ਸੱਜੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 50px ਹੈ
    • ਨੀਚੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 75px ਹੈ
    • ਸੱਦੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 100px ਹੈ

实例

margin ਸ਼ਾਰਟ ਪ੍ਰਾਪਰਟੀ ਨੇ ਚਾਰ ਕੀਮਤਾਂ ਸੈਟ ਕੀਤੀਆਂ ਹਨ:

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

亲自试一试

ਜੇਕਰ margin ਪ੍ਰਾਪਰਟੀ ਨੇ ਤਿੰਨ ਕੀਮਤਾਂ ਸੈਟ ਕੀਤੀਆਂ ਹਨ:

  • margin: 25px 50px 75px;
    • ਉੱਪਰ ਬਾਹਰੀ ਮੈਰਜਿਨ 25px ਹੈ
    • ਸੱਜੇ ਅਤੇ ਸੱਦੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 50px ਹਨ
    • ਨੀਚੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 75px ਹੈ

实例

ਤਿੰਨ ਕੀਮਤਾਂ ਸੈਟ ਕਰਨ ਲਈ ਮੈਰਜਿਨ ਸ਼ਾਰਟ ਪ੍ਰਾਪਰਟੀ ਵਰਤੋਂ ਕਰੋ:

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

亲自试一试

ਜੇਕਰ margin ਪ੍ਰਾਪਰਟੀ ਨੇ ਦੋ ਕੀਮਤਾਂ ਸੈਟ ਕੀਤੀਆਂ ਹਨ:

  • margin: 25px 50px;
    • ਉੱਪਰ ਅਤੇ ਨੀਚੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 25px ਹਨ
    • ਸੱਜੇ ਅਤੇ ਸੱਦੇ ਬਾਹਰੀ ਮੈਰਜਿਨ 50px ਹਨ

实例

ਦੋ ਕੀਮਤਾਂ ਸੈਟ ਕਰਨ ਲਈ ਮੈਰਜਿਨ ਸ਼ਾਰਟ ਪ੍ਰਾਪਰਟੀ ਵਰਤੋਂ ਕਰੋ:

p {
  margin: 25px 50px;
}

亲自试一试

ਜੇਕਰ margin ਪ੍ਰਾਪਰਟੀ ਨੇ ਇੱਕ ਕੀਮਤ ਸੈਟ ਕੀਤੀ ਹੈ:

  • margin: 25px;
    • ਸਾਰੇ ਚਾਰ ਬਾਹਰੀ ਮੈਰਜਿਨ 25px ਹਨ

实例

ਇੱਕ ਕੀਮਤ ਸੈਟ ਕਰਨ ਲਈ ਮੈਰਜਿਨ ਸ਼ਾਰਟ ਪ੍ਰਾਪਰਟੀ ਵਰਤੋਂ ਕਰੋ:

p {
  margin: 25px;
}

亲自试一试

auto ਕੀਮਤ

您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

实例

使用 margin: auto：

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

亲自试一试

inherit 值

本例使

元素的左外边距继承自父元素（

）：

实例

使用 inherit 值：

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

亲自试一试

延伸阅读

课外书：框模型：CSS 外边距