CSS ਵਾਧੂ ਮਾਰਜਿਨ ਮਿਲਣ

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

ਸਧਾਰਨ ਤੌਰ 'ਤੇ, ਮਾਰਜਿਨ ਮਿਲਣਾ ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਦੋ ਵਿਸਤਾਰ ਮਾਰਜਿਨ ਮਿਲਦੇ ਹਨ, ਤਾਂ ਉਹ ਇੱਕ ਮਾਰਜਿਨ ਬਣਾ ਦਿੰਦੇ ਹਨ। ਮਿਲਣ ਵਾਲੇ ਮਾਰਜਿਨ ਦੀ ਉਚਾਈ ਮਿਲਣ ਵਾਲੇ ਮਾਰਜਿਨਾਂ ਦੀ ਉਚਾਈ ਵਿੱਚੋਂ ਵੱਡੀ ਹੁੰਦੀ ਹੈ。

ਜਦੋਂ ਇੱਕ ਐਲੀਮੈਂਟ ਦੂਜੇ ਐਲੀਮੈਂਟ ਦੇ ਉੱਪਰ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਪਹਿਲੇ ਐਲੀਮੈਂਟ ਦੇ ਨਿਚਲੇ ਮਾਰਜਿਨ ਅਤੇ ਦੂਜੇ ਐਲੀਮੈਂਟ ਦੇ ਉੱਪਰੀ ਮਾਰਜਿਨ ਮਿਲ ਜਾਣਗੇ। ਨਿਚੋਰੇ ਵਿੱਚ ਦੇਖੋ:

CSS ਵਾਧੂ ਮਾਰਜਿਨ ਮਿਲਣ ਦਾ ਉਦਾਹਰਣ 1

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਜਦੋਂ ਇੱਕ ਐਲੀਮੈਂਟ ਦੂਜੇ ਐਲੀਮੈਂਟ ਵਿੱਚ ਸਮੇਤ ਹੁੰਦਾ ਹੈ (ਅਗਰ ਕੋਈ ਇਨਡੈਂਟ ਜਾਂ ਬੋਰਡਰ ਨਹੀਂ ਹੈ ਜੋ ਮਾਰਜਿਨ ਨੂੰ ਵੰਡਦੇ ਹਨ), ਤਾਂ ਉਨ੍ਹਾਂ ਦੇ ਉੱਪਰੀ ਅਤੇ/ਜਾਂ ਨਿਚਲੇ ਮਾਰਜਿਨ ਵੀ ਮਿਲ ਜਾਣਗੇ। ਨਿਚੋਰੇ ਵਿੱਚ ਦੇਖੋ:

CSS ਵਾਧੂ ਮਾਰਜਿਨ ਮਿਲਣ ਦਾ ਉਦਾਹਰਣ 2

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਭਾਵੇਂ ਇਹ ਕੁਝ ਅਜਿਹਾ ਦਿਖਦਾ ਹੋਵੇ, ਪਰ ਮਾਰਜਿਨ ਸਵੈ ਨਾਲ ਵੀ ਮਿਲ ਸਕਦੇ ਹਨ。

ਇੱਕ ਖਾਲੀ ਐਲੀਮੈਂਟ ਹਾਸਲ ਹੁੰਦਾ ਹੈ, ਜਿਸ ਕੋਲ ਮਾਰਜਿਨ ਹੈ, ਪਰ ਕੋਈ ਫੰਡਸ ਜਾਂ ਫਿਲਟਰ ਨਹੀਂ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਉੱਪਰੀ ਮਾਰਜਿਨ ਅਤੇ ਨਿਚਲੇ ਮਾਰਜਿਨ ਮਿਲ ਜਾਣਗੇ, ਅਤੇ ਉਹ ਮਿਲ ਜਾਣਗੇ:

CSS ਵਾਧੂ ਮਾਰਜਿਨ ਮਿਲਣ ਦਾ ਉਦਾਹਰਣ 3

ਜੇਕਰ ਇਹ ਮਾਰਜਿਨ ਦੂਜੇ ਐਲੀਮੈਂਟ ਦੇ ਮਾਰਜਿਨ ਨਾਲ ਮਿਲਦਾ ਹੈ, ਤਾਂ ਉਹ ਵੀ ਮਿਲ ਜਾਣਗੇ:

CSS ਵਾਧੂ ਮਾਰਜਿਨ ਮਿਲਣ ਦਾ ਉਦਾਹਰਣ 4

ਇਹ ਇਸ ਲਈ ਹੈ ਕਿ ਇੱਕ ਲੜੀ ਦੇ ਪੈਰਾਗ੍ਰਾਫ ਐਲੀਮੈਂਟ ਬਹੁਤ ਘੱਟ ਜਗ੍ਹਾ ਲੈਂਦੇ ਹਨ ਕਿਉਂਕਿ ਉਨ੍ਹਾਂ ਦੇ ਸਾਰੇ ਮਾਰਜਿਨ ਮਿਲ ਜਾਂਦੇ ਹਨ ਅਤੇ ਇੱਕ ਛੋਟਾ ਮਾਰਜਿਨ ਬਣਾ ਦਿੰਦੇ ਹਨ。

ਮਾਰਜਿਨ ਮਿਲਣਾ ਪਹਿਲਾਂ ਦੇਖਦੇ ਹੋਏ ਕੁਝ ਅਜਿਹਾ ਹੋਵੇਗਾ, ਪਰ ਇਹ ਸਾਚੀ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਕੁਝ ਪੈਰਾਗ੍ਰਾਫਾਂ ਵਾਲੇ ਆਮ ਲਿਖਤ ਪੰਨੇ ਦੇ ਉਦਾਹਰਣ ਵਜੋਂ ਦੇਖੋ। ਪਹਿਲੇ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਉੱਪਰਲੇ ਜਗ੍ਹਾ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਉੱਪਰੀ ਮਾਰਜਿਨ ਨਾਲ ਬਰਾਬਰ ਹੈ। ਅਗਰ ਮਾਰਜਿਨ ਮਿਲਣਾ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਬਾਅਦ ਵਾਲੇ ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫਾਂ ਦਰਮਿਆਨ ਦਾ ਮਾਰਜਿਨ ਅਗਲੇ ਉੱਪਰੀ ਮਾਰਜਿਨ ਅਤੇ ਨਿਚਲੇ ਮਾਰਜਿਨ ਦਾ ਜੋੜ ਹੋਵੇਗਾ। ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਪੈਰਾਗ੍ਰਾਫਾਂ ਦਰਮਿਆਨ ਦਾ ਜਗ੍ਹਾ ਪੰਨੇ ਦੇ ਉੱਪਰਲੇ ਦੋ ਗੁਣਾ ਹੋਵੇਗਾ। ਅਗਰ ਮਾਰਜਿਨ ਮਿਲਣਾ ਹੁੰਦਾ, ਤਾਂ ਪੈਰਾਗ੍ਰਾਫਾਂ ਦਰਮਿਆਨ ਦਾ ਉੱਪਰੀ ਮਾਰਜਿਨ ਅਤੇ ਨਿਚਲੇ ਮਾਰਜਿਨ ਮਿਲ ਜਾਣਗੇ, ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਸਾਰੇ ਜਗ੍ਹਾ ਇੱਕ ਜਗ੍ਹਾ ਹੋ ਜਾਣਗੇ。

CSS ਵਾਧੂ ਮਾਰਜਿਨ ਮਿਲਣ ਦਾ ਵਾਸਤਵਿਕ ਮਹੱਤਵ

ਟਿੱਪਣੀਆਂ:ਕੇਵਲ ਆਮ ਡੋਕੂਮੈਂਟ ਸਟ੍ਰੀਮ ਵਿੱਚ ਬਲਕ ਬਕਸ ਦੇ ਵਿਸਤਾਰ ਮਾਰਜਿਨ ਮਿਲਣਗੇ। ਇਨਲਾਈਨ ਬਕਸ, ਫਲੌਟਿੰਗ ਬਕਸ ਜਾਂ ਅਬਸੋਲਿਊਟ ਸਥਾਨਾਂ ਦਰਮਿਆਨ ਮਾਰਜਿਨ ਮਿਲਣਗੇ ਨਹੀਂ。

ਸਾਰੇ CSS ਬਾਹਰੀ ਮਾਰਜਿਨ ਪ੍ਰਾਪਤੀਆਂ

ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਣਨ
margin ਬਾਹਰੀ ਮਾਰਜਿਨ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਸਖਤ ਸ਼ਰਤ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
margin-bottom ਪੱਧਰ ਦੇ ਨੀਚੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。
margin-left ਪੱਧਰ ਦੇ ਸਾਹਮਣੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。
margin-right ਪੱਧਰ ਦੇ ਦਾਇਰੇ ਵਾਲੀ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。
margin-top ਪੱਧਰ ਦੇ ਉੱਪਰ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。