Box Model در CSS چیست؟ آموزش margin، padding و border به زبان ساده
تا حالا شده width بزنی ولی باکس بزرگ تر از چیزی که فکر میکردی بشه؟😵 این دقیقاً همونجاست که Box Model در CSS وارد بازی میشه. تو این آموزش ساده و قابل فهم یاد میگیری Box Model چیست وmargin، padding و border دقیقاً کجای باکس هستن و چطور روی اندازه و فاصلهها اثر میذارن.📦✨ با چند مثال کوتاه هم کاری میکنیم دیگه تو layout ها گیج نشی و سریع تر به نتیجه برسی.🚀
Box Model چیست؟
عنصر width ۲۰۰px نوشتی ۴۰۰ px شد؟ Box Model anatomy مشکل رو حل میکنه! 😱 تصویر :anatomy
┌──────────────────────┐ ← margin (شفاف)
│ margin │
├──────────────────────┤
│ border │ ← border
│ ┌────────────────┐ │
│ │ padding │ │ ← padding (شفاف)
│ │ ┌────────────┐ │ │
│ │ │ content │ │ │ ← content (متن/تصویر)
│ │ │ 200x100 │ │ │
│ │ └────────────┘ │ │
│ └────────────────┘ │
└──────────────────────┘کد مثال واقعی:
<div class="box">متن محتوا</div> ...
.box {
width:200px; /* content width */
height:100px; /* content height */
padding:20px; /* داخل content */
border:5px solid blue;
margin:30px; /* بیرون border */
}
Padding و :Margin فاصلههای جادویی که layout رو نجات میدن
مثال:HTML
<div class="card">کارت محتوا</div>
<div class="card">کارت بعدی</div>: Padding فاصله content از border
.card {
padding:20px; /* همه جهات ۲۰px */
padding:10px 30px; /* بالا/پایین ۱۰، چپ/راست ۳۰ */
padding:15px 25px 10px 30px; /* بالا،راست،پایین،چپ */
background:lightblue; /* padding رنگ پسزمینه میگیره */
}نتیجه: متن از border فاصله میگیره،card نفس میکشه! :Margin فاصله card ها از هم
.card {
margin:15px; /* همه جهات */
margin:0 auto; /* وسطچین افقی */
margin-bottom:20px; /* فقط پایین */
}نتیجه card :ها از هم فاصله میگیرن،margin شفافه!
Box-sizing :border-box vs content-box که همه developer ها اشتباه میکنن
width:200px نوشتی ۳۵۰px شد؟ box-sizing 😱 همه developer ها رو نجات میده!
مثال:HTML
<div class="box1">content-box</div>
<div class="box2">border-box</div>) content-box پیشفرض بد):
.box1 {
width:200px;
padding:20px;
border:5px solid red;
}نتیجه :total width =۲۰۰+۴۰+۱۰=۲۵۰ pxعرض زیاد شد!😤 border-box (حلال مشکل):
.box2 {
box-sizing:border-box;
width:200px;
padding:20px;
border:5px solid green;
}نتیجه total width= padding+border :داخل width جا میگیره!🪄
Box Model یعنی هر element یه جعبه داره: اولcontent ، بعد padding، بعد border و آخرش .✅ margin اگر این چهارتا رو درست بشناسی، چیدمان صفحه خیلی تمیزتر و قابل پیشبینی تر میشه و دیگه با فاصلهها و اندازهها کلنجار نمیری.🎯 از همین امروز تو DevTools مرورگر یه عنصر رو inspect کن وmargin،padding و border رو تغییر بده تا سریع تو ذهنت جا بیفته.🔥
این مقاله به درد یکی از رفیقات میخوره؟
با یه کلیک براش بفرست تا اونم تو این مسیر همراهت بشه
مقالات مرتبط با این موضوع
برای ادامه مسیرت اینا رو از دست نده
CSS چیست؟ آموزش کامل CSS از صفر و نقش آن در طراحی صفحات وب
HTML اسکلت صفحاتته، ولی زشت و سیاهسفید CSS چیست؟ آموزش کامل CSS از صفر و نقش آن در طراحی صفحات وب" آرایشگر حرفهای وب رو بهت معرفی میکنه! یاد میگیری CSS چطور صفحات رو زیبا میکنه،۳ روش اتصال inline internal external رو بشناسی و انتخابگرهای CSS class id element رو master کنی تا از آموزش CSS از صفر به طراح حرفهای برسی.🎨🚀
CSS Selectors چیست؟ آموزش انواع سلکتورها در CSS با مثال
CSS مینویسی ولی هیچ تغییری تو صفحه نمیبینی؟😩 مشکل خیلی وقتها از اینه که درست element رو انتخاب نکردی. اینجا قراره خیلی ساده و قابل فهم یاد بگیری CSS Selectors چیست و چطور با انواع selector ها مثل element،class،ID،hover،nth-child و selector های رابطه ای مثل >,+,~ دقیقاً همون بخشی از صفحه رو استایل بدی که میخوای.🎯✨