چرا margin به متن در div تغییر ایجاد میکنه؟

[<?php?>]

سلام دوستان .
دوتا div داریم با این مشخصات :


<div class="main"></div>
<div class="main2">
<h5>salam</h5>
</div>




.main{
width:500px;
height:250px;
background-color:red;
margin:auto;
}
.main2{
width:500px;
height:250px;
background-color:green;
margin:auto;
}
.main2 h5{
margin-top:20px;
}


من به h5 که داخل main2 هست دارم خاصیت margin-top میدم . چرا کل main2 از main1 داره 20px فاصله میگیره؟ من که به تگ h5 این خاصیتو دادم ؟ ( دستوری هست که بشه زد و این اتفاقو خنثی کنه ؟ )
میدونم که با دادن خاصیت padding-top به h5 همه چیز درست میشه . سوالم اینجاست که :
مگه margin معنیش این نیست : ایجاد فاصله از بیرون ؟ پس چرا از بالای h5 فاصله نمیگیره ؟ و برای main2 فاصله میفته؟

-------
حالا اینو ببینید :


.main2 h5{
margin-right:20px;
}



الان h5 درست عمل میکنه و از راست خودش فاصله میگیرد / درصورتی که وقتی margin-top دادم عمل نکرد

تشکر

[Gh-Moradi]

سلام، این خاصیت رو به تگ h5 اضافه کنید

display:inline-block;

[<?php?>]

سلام، این خاصیت رو به تگ h5 اضافه کنید

display:inline-block;

خیلی ممنون .
میشه بدونم علتش چیه؟ علت توضیحی میخوام بدونم . کارم راه افتاد ولی دوست دارم علتشو هم بدونم .
display:inline-block به زبان عامیانه به تگ h5 چی میگه که تگ H5 مجبور میشه که از باکس مادرش فاصله بگیره ؟

تگ های متنی اصلا چرا نمیتونن از div های بالا خودشون با خاصیت margin-top فاصله بگیرن ؟ علتشو میخوام بدونم .

از دوستان خواهش میکنم اگر دانششو دارید راهنمایی کنید . خدارو شکر تو این انجمن دوستان با سواد زیادی داریم - ممنون از همتون

[<?php?>]

جدی کسی حضور نداره جواب مارو بده؟ هیچکی بلد نیست بین بچه های انجمن خداییشش ؟

[masoud_pnu]

دوست خوبم،این برمیگرده به تعریف مقادیر خصوصیت display.
هنگام استفاده از مقدار inline:
تغییر در padding یا margin چپ یا راست ممکنه.اما بالا یا پایین ممکن نیستسایر المان ها در کنار المان دارای این خصوصیت قرار میگیرن.مقدار width و height برای المانی که این خصوصیت رو داره،قابل تعریف نیست.

هنگام استفاده از مقدار block:
تغییر در padding یا margin در تمام جهات ممکنه.اما در این حالت،المان ها روی هم قرار میگیرن.نه کنار هم.

هنگام استفاده از مقدار inline-block:
این حالت تلفیقی از دو حالت بالاست.المان ها درکنار هم قرارمیگیرن.اما قابلیت تعریف width و height و همچنین padding و margins در تمام جهات رو دارن.
.
اینا تفاوت هاشون بود.