బాక్స్ మోడల్: CSS పెరిఫరల్ మార్జిన్ మెరుగుపరచడం

పెరిఫరల్ మార్జిన్ మెరుగుపరచడం అనేది, రెండు ప్రత్యేక పెరిఫరల్ మార్జిన్లు కలిసిపోయాయినప్పుడు, వాటిని ఒక పెరిఫరల్ మార్జిన్గా ఏర్పాటు చేస్తాయి.

మెరుగుపరచబడిన పెరిఫరల్ మార్జిన్ ఉన్నతి కలిగినది రెండు మెరుగుపరచబడిన పెరిఫరల్ మార్జిన్ల ఉన్నతిలో అతిపెద్దది అని ఉంటుంది.

పెరిఫరల్ మార్జిన్ మెరుగుపరచడం

పెరిఫరల్ మార్జిన్ మెరుగుపరచడం (అద్దంగా పెరిగిపోవడం) ఒక చాలా సరళమైన ఆలోచన. కానీ, వెబ్ లేఆఉట్ చేయడంలో వాస్తవానికి ఇది అనేక గుర్తింపులకు కారణం అవుతుంది.

సరళంగా చెప్పాలంటే, పెరిఫరల్ మార్జిన్ మెరుగుపరచడం అనేది, రెండు ప్రత్యేక పెరిఫరల్ మార్జిన్లు కలిసిపోయాయినప్పుడు, వాటిని ఒక పెరిఫరల్ మార్జిన్గా ఏర్పాటు చేస్తాయి. మెరుగుపరచబడిన పెరిఫరల్ మార్జిన్ ఉన్నతి కలిగినది రెండు మెరుగుపరచబడిన పెరిఫరల్ మార్జిన్ల ఉన్నతిలో అతిపెద్దది అని ఉంటుంది.

ఒక అంశం మరొక అంశంపై ఉన్నప్పుడు, మొదటి అంశం యొక్క కింద పెరిఫరల్ మార్జిన్ మరియు రెండవ అంశం యొక్క పై పెరిఫరల్ మార్జిన్ మెరుగుపరచబడతాయి. దయచేసి ఈ చిత్రాన్ని చూడండి:

CSS పెరిఫరల్ మెర్జిన్ మెర్జిన్ ఉదాహరణ 1

స్వయంగా ప్రయత్నించండి

ఒక అంశం మరొక అంశంలో ఉన్నప్పుడు (అందులో పెరిఫరల్ మార్జిన్ లేదా బార్డర్ లేదా మార్జిన్ కలిగి ఉండకూడదు అని భావించండి), వాటి పై మరియు / లేదా కింద పెరిఫరల్ మార్జిన్ కూడా మెరుగుపరచబడతాయి. దయచేసి ఈ చిత్రాన్ని చూడండి:

CSS పెరిఫరల్ మెర్జిన్ మెర్జిన్ ఉదాహరణ 2

స్వయంగా ప్రయత్నించండి

అయితే చూడితే అసాధారణంగా ఉండవచ్చు, కానీ పెరిఫరల్ మార్జిన్ కూడా తనను తానుతో మెరుగుపరచవచ్చు.

ఒక ఖాళీ అంశం ఉంది, ఇది పెరిఫరల్ మార్జిన్ కలిగి ఉంది, కానీ బార్డర్ లేదా ఫిల్ల్ లేదు. ఈ సందర్భంలో, పై పెరిఫరల్ మార్జిన్ మరియు కింద పెరిఫరల్ మార్జిన్ కలిసిపోయాయి, వాటిని మెరుగుపరచారు:

CSS పెరిఫరల్ మెర్జిన్ మెర్జిన్ ఉదాహరణ 3

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

CSS పెరిఫరల్ మెర్జిన్ మెర్జిన్ ఉదాహరణ 4

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

CSS పెరిఫరల్ మెర్జిన్ యొక్క వాస్తవిక మానసికత

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。