سوال: Collapsing Margins یا حاشیه های جمع شونده چی هستن؟ [بایگانی]

sahel65

یک شنبه 07 تیر 1394, 07:40 صبح

سلام دوستان گلم؛
یه سوال داشتم ازتون؛اول این کد رو ببینین:
<style type="text/css">
#wrapper{
background-color:red;
}
#wrapper div{
width:120px;
height:100px;
background:#eee;
padding:20px 35px ;
border:2px solid #444;
margin:20px 10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div></div>
<div></div>
<div></div>
</div>
</body>

الان که میخواستم ارتفاع wrapper رو بدست بیارم دیدم 40 تا اشتباه کردم که نگو مربوط به margin-top مربوط به div اول و margin-bottom مربوط به div آخر بوده.
آخه چرا اینها فاصله نگرفتن از بالا و به بالا و پایین چسبیدن؟
مگه نباید اینها هم از بالا و پایین فاصله می گرفتن؟ با جستجو و تحقیقی که کردم دیدم میگن مربوط میشه به مبحث Collapsing margins !
میشه یه توضیحی بهم بدین که این چیه و چرا بوجود میاد؟
مرسی عزیزانم.

tamafi6

چهارشنبه 10 تیر 1394, 13:53 عصر

چونکه بلوک wrapper رابی هدف وآزادقراردادید وهیچ کلاسی نداره وبه همه div ها یک خصوصیت دادید درصورتی این مشکل رفع میشه که div های شما دسته بندی بشوند وگرنه برای رفع مشکل باید کلاس display:table; رابه بلوک wrapper اختصاص بدیدتا بلوک به صورت table نمایش داده بشه ویا به هر div یک کلاس اختصاص بدید چون مانند بالا کلاس اختصاص دادن کاردرستی نیست علت اینه که همه عناصرصفحه ازیک قانون تبعیت میکنند و مکاندهی به همه عناصراعمال میشه ویا اگربخواهید بلوک wrapper از قانون شماپیروی کنه باید به wrapper مکان دهی مطلق بدیدباافزودن position:absolute;
ریزه کاری های css فراوانه وفقط باید تمرین کنید
بلوکها ی والد راهم id ندهید واز class استفاده کنید