بیان توضیحاتی در خصوص مارجین و پدینگ بوردر

مفهوم مارجین (Margin) و پدینگ بوردر (Padding Border)

مارجین و پدینگ بوردر دو ویژگی اصلی و مهم در CSS هستند.

Margin

Margin در فارسی به معنی حاشیه است و در زبان CSS برای تنظیم حاشیه یا همان فضای اطراف یک عنصر استفاده می شود.

با مارجین می توان در CSS کنترل کامل بر حاشیه ها داشت.

در margin و padding می توان مانند هم حاشیه ها را تنظیم نمود.

ویژگی های Margin

Margin-top: حاشیه بیرونی از بالا

Margin-right: حاشیه بیرونی از راست

Margin-bottom: حاشیه بیرونی از چپ

Margin-left: حاشیه بیرونی از راست

نمونه کدcss مارجین:

}box.
;Width: 100px
;Height: 100px
;Background: white
;Margin:5px
}

اگر مقدار margin را Auto قرار دهید، مرورگر به صورت پیش فرض فاصله هایی از جهات چپ، راست، بالا و پایین اعمال می کند.

}box.
;Margin: auto
}

نحوه مقدار دهی مارجین و پدینگ بوردر در کد CSS یکسان است.

Padding Border

پدینگ در فارسی به معنی لایه یا لایه گذاری است ولی در زبان CSS پدینگ فاصله از داخل بلاک را مشخص می کند.

در واقع Padding فاصله بین متن یا محتوای دیگر درون باکس یا حاشیه های باکس است.

کاربرد دیگر آن، برای زیباتر کردن ظاهر سایت در طراحی سایت است.

با استفاده از ویژگی padding می توانیم حاشیه درونی عناصر را تنظیم کنیم.

مانند کد زیر:

<p style="background-color:yellow;border:solid 5px red;padding:20px;">;کار با پدینگ</p>

در واقع ویژگی پدینگ، فاصله بین بخش content و بخش border را تعیین می کند.

پارامترهای ویژگی padding

• تک پارامتری

اگر به پدینگ تنها یک پارامتر مانند مثال بالا که (۲۰px) بود، اختصاص دهیم، این مقدار برای چهار جهت بالا پایین چپ و راست اختصاص می یابد. یعنی در مثال بالا عنصر P از چهار جهت مقدار ۲۰px حاشیه از درون یا همان padding را دارد.

• دو پارامتری

اگر به پدینگ ۲ مقدار بدهیم، مقدار اول برای جهت بالا و پایین و مقدار دوم برای جهت چپ و راست در نظر گرفته می شود.

مانند نمونه کد زیر:

<p style="background-color:yellow;border;solid 5px red;padding:10px 30px;">کار با پدینگ دو پارامتری</p>

• چهار پارامتری

در حالت آخر اگر به ویژگی پدینگ ۴ پارامتر بدهیم، به ترتیب اولین مقدار برای بالا، دومین مقدار برای راست، سومین مقدار پایین و چهارمین مقدار برای چپ اعمال می شود.

مانند کد زیر:

<p style="background-color:yellow;border:solid 5px white;padding: 5px10px15px20px;>کار با پدینگ چهار پارامتری</p>

در این مثال عنصر p مورد نظر از بالا ۵px،از سمت راست ۱۰px، از سمت پایین ۱۵px و از چپ ۲۰px تنظیم شده است.

ویژگی های padding

padding-top: حاشیه درونی از بالا

padding-right: حاشیه درونی از راست

padding-bottom: حاشیه درونی از پایین

Margin-left: حاشیه درونی از چپ

نمونه کد CSS پدینگ:

}box.
;Width:100px
;Height:100px
;Background: white
;Padding:10px
{

با مطالعه مقاله آموزش ایجاد تغییرات CSS می توانید اطلاعات بیشتری راجع به زبان CSS کسب کنید.

محاسبه اندازه ها مدل جعبه ای (Box Model)

با وجود مارجین و پدینگ بوردر فضایی که یک Box اشغال می کند با اندازه ای که توسط whidth  و height تعیین می شود متفاوت است.

چون با استفاده از whidth و height فقط اندازه محتوا (content) تعیین می شود و برای محاسبه اندازه واقعی Box، باید اندازه های Margin و Padding Border به این نکته اضافه شود.

فرمول محاسبه whidth و height

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

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

تفاوت بین Margin و Padding

تفاوت بین مفهوم مارجین و پدینگ بوردر در این است که Margin برای فاصله از خارج عنصر استفاده می شود ولی Padding برای فاصله از داخل عنصر استفاده می شود.

تنظیمات ریسپانسیو بودن

پدینگ ها و مارجین ها باید برای سازگاری همه دستگاه ها بهینه شوند.

دقت کنید که هنگام کار بر روی صفحه خود، پس از طراحی آن، در لپ تاپ و موبایل سوییچ کرده و نمایش آن را بررسی کنید.

استفاده از مارجین ها و پدینگ ها در دکستاپ باعث می شود که کاربر از سایت شما استفاده بیشتری کند ولی موبایل باید مقدار آن را برای نمایش بهتر سایت کاهش دهید.

استفاده از Margin و Padding در طراحی و زیبایی سایت شما کمک بزرگی می کند. در نهایت باعث بهبود سئو سایت و بهنیه سازی سایت شما خواهد شد.

امیدواریم این مقاله برای شما مفید بوده باشد.

نظرات خود را با ما در میان بگذارید.