مبحث box model در CSS

 

تمامی عناصر HTML به شکل یک باکس مطرح شده و در css زمانی از box model استفاده می شود که سخنی از دیزاین و ساختار مطرح شود.

تمامی عناصر HTML در css به صورت یک باکس تصور میشود. که این مبحث در طراحی و طرح بندی صفحات استفاده میشود.

box model یا مدل کاری که در باکس قرار می گیرند به شکل زیر هستند :

Margin

border

padding

content

تصویر زیر box model را به صورت واضح تشریح میکند.

margin : این قسمت از box model فضای اطراف border را پوشش می دهد.در ضمن نمی توان به این قسمت دیزاین از قبل پس زمینه تعیین نماییم.

border : این قسمت از box model فضای اطراف content و padding را پوشش می دهد.در ضمن می توانید رنگ ، سبک، و ضخامت border را تعیین نماییم.

padding : این قسمت از box model فضای اطراف content را پوشش می دهد.در ضمن می توانید رنگ پس زمینه را تعیین نماییید.

content : این قسمت از box model محتوای عنصر را برمی گیرد . یعنی این همان جایی است که متن و عکس ها قرار می گیرد.

نکته: برای تنظیم بهتر عرض و ارتفاع حقیقی یک عنصر درک مفهوم box model بسیار مهم میباشد.

در قسمت بالا ما تنها تعریفی از اجزای box model نمودیم، حال هر کدام از اجزا را به صورت مفصل مورد بحث قرار میدهیم که در این مبحث تنها در مورد margin و padding صحبت میکنیم و دیگر اجزای آن را به دلیل بزرگی در مباحث جداگانه مورد بحث قرار میدهیم.

margin :

با استفاده از این خاصیت می توانیم محتوای سایت را از اصل صفحه فاصله دهیم که به زبان ساده margin فاصله بیرونی است.

<div class=”content”> آموزش کامل CSS </div>

در اینجا عنصر متن آموزش کامل CSS محتوای صفحه می باشد و اگر بخواهیم ای متن را از body به اندازه 50px حاشیه بدهیم از دستور زیر استفاده می کنیم.

.content {margin:50px ;}

در این صورت محتوا از طرف راست، چپ، بالا، پایین به اندازه 50px فاصله میگیرند.

چگونه از margin استفاده نماییم؟

قاعده دستوری margin به شکل زیر می باشد:

margin : margin-top margin-right margin-botom margin-left ;

یعنی :

margin: 10px 15px 20px 40px ;

در مثال بالا ما به اندازه 10px از طرف بالا، به اندازه 20px از سمت راست ، به اندازه 15px از طرف پایین ، به اندازه 40px از چپ فاصله ایجاد کردیم.

انواع نوشتن margin در css :

;margin:10px 5px 15px 20px

سمت بالا 10px، سمت راست 5px ، سمت پایین 15px سمت چپ 20px

; margin:10px 5px 20px

سمت بالا 10px،سمت راست و چپ 5px، سمت چپ 20px

; margin:10px 5px

سمت بالا، پایین 10px، سمت چپ و راست 5px

;margin:10px

سمت بالا، پایین،چپ، راست 10px

در بالا شما نوعی خلاصه نویسی را مشاهده میکنید، اما میتوان هر کدام را به شکل مجزا نیز بنویسید.

margin-top: فاصله از بالا

margin-right: فاصله از سمت راست

margin-bottom: فاصله از پایین

margin-left: فاصله از چپ

مثال:

margin-top :20px ; margin-right :30px ; margin-lift :10px ; margin-bottom :15px ;

padding:

این خاصیت در کل برای ایجاد نمودن فاصله داخلی به کار می رود .

<div class=”content”> آموزش کامل CSS </div>

در اینجا ما فاصله را از تگ فرزند تطبیق می کنیم. اگر ساده تر بگویم! متن ما (آموزش کامل CSS) را در بین یک باکس در نظر بگیرید فاصله باکس از اصل صفحه را margin و فاصله متن از باکس را padding می گوییم .

.content { margin:50px ; }

padding فاصله محتوای درون تگ را با لبه ی تگ تعیین میکند.به طوری که padding را فاصله داخلی می نامیم.

چگونه از padding استفاده نماییم؟

قاعده دستوری padding به شکل زیر میباشد:

padding: padding-top padding-raight padding-bottom padding-left ;

یعنی

padding:10px 20px 15px 40px ;

در مثال بالا ما به اندازه 10px از طرف بالا، به اندازه 20px از سمت راست، به اندازه 15px از طرف پایین، به اندازه 40px از چپ از لبه تگ تا محتوای داخل تگ فاصله ایجاد کردیم.

انواع نوشتن padding در css :

padding:10px 5px 15px 20px;

سمت بالا 10px، سمت راست 5px ، سمت پایین 15px سمت چپ 20px

padding:10px 5px 15px;

سمت بالا 10px،سمت راست و چپ 5px، سمت پایین 15px

padding: 10px 5px;

سمت بالا، پایین 10px، سمت چپ و راست 5px

padding: 10px;

سمت بالا، پایین ،چپ ، راست 10px

در بالا شما نوعی خلاصه نویسی را مشاهده می کنید، اما می توان هر کدام را به شکل مجزا نیز بنویسید .

padding-top : فاصله از بالا

padding-right : فاصله از سمت راست

padding-bottom : فاصله از پایین

padding-left : فاصله از چپ

مثال :

padding-top:20px ; padding-right:30px ; padding-left:10px ; padding-bottom:15px ;