چرا خاصیت پدینگ به درستی کار نمی کنه؟

[idocsidocs]

کد زیر رو در نظر بگیرید و بگید که عرض تگها چقدر هست؟



.w2 { width:290px; padding: 5px;}
.w1 { width:140px; padding: 5px;}
<div class="w2">

<div class="w1">1</div>

<div class="w1">1</div>

</div>

[mamali-mohammad]

w2 : 300
w1 : 150

[idocsidocs]

پس عرض دو تگ فرزند برابر عرض تگ والد می شه. با این حساب چرا این کد جواب نمی دیه؟
توجه کنید که کلاس تگهای فرزند تغییر کرده.

.w2 { width:290px; padding: 5px;} .w1 { width:140px; padding: 5px;}
.f {float:left;}
<div class="w2">
<div class="w1 f">1</div>
<div class="w1 f">1</div>
</div>

[mamali-mohammad]

نه توجه کن شما padding دادی
یعنی داخل رو پر کردی
در حقیقت فضای داخلی هنوز 290 هست اما عرض کلی 300 میشه
یعنی شما باید دوتا فرزند با سایز 145 پیکسل قرار بدی بدون padding قرار بدی یا 135 پیکسل با padding:5px

[idocsidocs]

نه توجه کن شما padding دادی
یعنی داخل رو پر کردی
در حقیقت فضای داخلی هنوز 290 هست اما عرض کلی 300 میشه
یعنی شما باید دوتا فرزند با سایز 145 پیکسل قرار بدی بدون padding قرار بدی یا 135 پیکسل با padding:5px
دقیقا متوجه منظورتون نشدم. می شه بیشتر توضیح بدید؟

[mamali-mohammad]

.w2 { width:290px; padding: 5px;} .w1 { width:135px; padding: 5px;}
.f {float:left;}

[idocsidocs]

یعنی وقتی از float استفاده می کنیم باید عرض تگ رو کمتر در نظر بگیریم؟

[mamali-mohammad]

ببین جریان اینطوریه :
شما یه عرض دادی 290px
یه padding:5px هم دادی بهش
درست تا اینجا ؟
یعنی عرض اصلی شد 300px
اما همچنان محتویات قابل استفاده هنوز 290 پیکسل هست

حالا داخلش اومدی دوتا دایو دیگه گذاشتی
که عرض دوتاش روی هم باید بشه 290 پیکسل
یعنی باید از دوتا 145 پیکسل استفاده کنی
اما اومدی برای هر کدوم padding:5px گذاشتی یعنی 10 پیکسل به عرض اضافه میشه
روی هم میشن 155+155 = 310px
یعنی 30 پیکسل زیاد شد ! ( از 290 تا زد بالاتر )
پس باید چیکار کنیم ؟
عرض رو کمتر کنیم روی 135 بزاریم
در نتیجه 135+10 = 145 >>> 145+145 = 190px و در نهایت مشکل حل میشه

عکس رو ضمیمه کردم

[idocsidocs]

حالا داخلش اومدی دوتا دایو دیگه گذاشتی
که عرض دوتاش روی هم باید بشه 290 پیکسل
یعنی باید از دوتا 145 پیکسل استفاده کنی
اما اومدی برای هر کدوم padding:5px گذاشتی یعنی 10 پیکسل به عرض اضافه میشه
توی کدهای پست اول عرض تگ والد 300 هست. عرش تگهای فرزند هم 140 هست که با padding:5px می شه 150 پیکسل. حساب و کتاب شما درست نیست.