امیر سروریCSS، اصول طراحی وب سایت

این مقاله بخشی از آرشیو تاریخی وب‌تارگت است و ممکن است به‌روز نباشد، به‌ویژه در موضوعات فنی. پیش از استفاده از مطالب، تاریخ انتشار را بررسی کنید.

تمامی عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای ایجاد ساختار مناسب در طراحی یک وب سایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مفهوم Box Model در CSS به بررسی خصوصیات و توانایی های این اجزاء ( Box ) می پردازد .

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content است .
مفهوم Box Model این توانایی را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را تعیین کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را تعیین کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر تعیین کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیقتر درک کنید .

آموزش Css , padding , margin , border

Margin

فضای خالی در خارج از محیط Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . این فضا دارای رنگ پس زمینه نیست وبه صورت یک فضا با پس زمینه شفاف یا Transparent در فضای اطراف Box قرار میگیرد .

CSS

div {
    margin: 10px;
}

CSS

div {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 3px;
}

Border

مشخص کننده مرز خارجی Box خارج از محتوا ( Content ) و ( Padding ) که میتوان میزان ضخامت و رنگ و نوع آن را تعیین نمود .به صورت پیش فرض رنگ آن از رنگ زمینه Box پیروی میکند .

CSS

div {
    border: 1px solid #888;
}

CSS

div {
    border-bottom: 2px solid #070;
    border-left: 2px double #070;
    border-top: 2px dashed #070;
    border-right: 2px dotted #070;
}

Padding

فضای خالی مابین محتوا و مرز ( Border ) داخلی Box ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی میکند .

CSS

div {
    padding: 15px;
}

CSS

div {
    padding-left: 5px;
    padding-top: 20px;
    padding-right: 8px;
    padding-bottom: 7px;
}

Content

محتویات داخای یک Box ، که میتواند شامل متن ، تصویر ، لیست و یا جدول و … باشد .

نحوه محاسبه اندازه یک Box

برای طراحی و چینش دقیق اجزاء در طراحی یک صفحه وب ، تمامی اجزاء جزء به جزء با دقت 1px محاسب میشوند و با توجه به این موضوع نحوه محاسبه اندازه ( Width , Height ) در یک Box بسیار مهم است .
با استفاده از خصوصیات width , height اندازه اجزاء ( Box ) تعیین میگردند ، اما به این نکته توجه کنید که ، در صورت وجود ( Border , Margin , Padding ) فضایی که Box اشغال خواهد کرد با اندازه ای که توسط خصوصیات Width و height تعیین شده است متفاوت خواهد بود . در واقع با استفاده از width و height تنها اندازه محتوا ( Content ) تعیین شده است و برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند .
این نکته مهم را به یاد داشته باشید که ، Padding و Border در اندازه یک Box – Width or Height تاثیر گزار هستند ، این اندازه با استفاده از فرمول زیر محاسبه می شود

آموزش Css , padding , margin , border

width = width + left padding + right padding + left border + right border + left margin + right margin

آموزش Css , padding , margin , border

height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin