CSS Margin Collapse


فهرست مطالب

    نمایش فهرست مطالب


.ﺪﻧﻮﺷ ﯽﻣ ﻊﻤﺟ ﻪﯿﺷﺎﺣ ﮏﯾ ﺭﺩ ﻪﯿﺷﺎﺣ ﻭﺩ ﺕﺎﻗﻭﺍ ﯽﻫﺎﮔ


ﻪﯿﺷﺎﺣ ﯽﺷﺎﭘﻭﺮﻓ

ﺪﻧﻮﺷ ﯽﻣ ﻊﻤﺟ ﺪﺣﺍﻭ ﮏﯾ ﺕﺭﻮﺻ ﻪﺑ ﺕﺎﻗﻭﺍ ﯽﻫﺎﮔ ﺮﺻﺎﻨﻋ ﻦﯿﯾﺎﭘ ﻭ ﻻﺎﺑ ﯼﺎﻫ ﻪﯿﺷﺎﺣ

!ﻦﯿﯾﺎﭘ ﻭ ﻻﺎﺑ ﯼﺎﻫ ﻪﯿﺷﺎﺣ ﻂﻘﻓ !ﺪﺘﻓﺍ ﯽﻤﻧ ﻕﺎﻔﺗﺍ ﻦﯾﺍ ﺖﺳﺍﺭ ﻭ ﭗﭼ ﻪﯿﺷﺎﺣ ﺭﺩ

:ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺮﯾﺯ ﻝﺎﺜﻣ ﻪﺑ

ﻝﺎﺜﻣ

:ﻪﯿﺷﺎﺣ ﯽﺷﺎﭘﻭﺮﻓ ﺶﯾﺎﻤﻧ

h1 {
  margin: 0 0 50px 0;
}
h2 {
  margin: 20px 0 0 0;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

</body>
</html>


ﻭ ﻞﺴﮑﯿﭘ 50 ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﯼﺍﺭﺍﺩ <h1> ﺮﺼﻨﻋ ،ﻻﺎﺑ ﻝﺎﺜﻣ ﺭﺩ

ﺖﺳﺍ <h1> ﻦﯿﺑ ﯼﺩﻮﻤﻋ ﻪﯿﺷﺎﺣ ﺯﺍ ﯽﮐﺎﺣ ﻢﯿﻠﺳ ﻞﻘﻋ ﺪﺳﺭ ﯽﻣ ﺮﻈﻧ ﻪﺑ



CSS ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ

margin

ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

margin-bottom

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ

margin-left

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

margin-right

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

margin-top

ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ