حاشیه در CSS – آشنایی با padding و margin در css
خوش اومدین به ششمین جلسه از دوره آموزش CSS. تو این بخش قصد داریم در مورد حاشیه در css صحبت کنیم.css این امکان رو در اختیار ما قرار میده که برای هر تگ حاشیه هایی رو در نظر بگیریم. میگم حاشیه ها به این دلیل هست که ما 3 نوع حاشیه در css داریم. توی جلسه قبلی با یک نوع از این حاشیه بنام border آشنا شدیم. border در css نوعی حاشیه به حساب میاد که ما میتونستیم با تنظیمات متنوعی که داشت اون رو به شکل دلخواه خودمون دربیاریم. امروز قرار هست با دو نوع حاشیه دیگه آشنا بشیم. پس با همدیگه میریم و این جلسه رو شروع میکنیم.
حاشیه ها در CSS
همونطور که گفتم ما 3 نوع حاشیه در css داریم. به تصویر بالا نگاه کنید. بخش آبی رنگ محتوای داخل تگ ما رو شامل میشه. بخش زرد رنگ یا همون border رو در جلسه قبل باهاش آشنا شدیم. ما میتونستیم نوع border رو مشخص کنیم بهش رنگ موردنظرمون رو اختصاص بدیم و ضخامت موردنیازمون رو بهش اختصاص بدیم. حالا margin و padding چی هستن؟
padding فضای بین border و محتوای تگ است و margin فضای بیرون از border هست. این دو در حالت پیشفرض مقدار 0 رو دارند. ما امروز یاد میگیری که چجور به این دو ویژگی مقدار بدیم و ازشون استفاده کنیم. در تصویر بالا بخش padding رو با رنگ سبز مشخص کردیم و بخش margin رو با رنگ نارنجی.
نکته مهم: Padding فاصله بین border و محتوای داخل تگ هست و نه خود تگ. این موضوع مهم است و باید به اون توجه کنیم. یعنی اگر برای padding مقداری رو تعریف کنیم فاصله بین تگ و border ایجاد نمیشه بلکه فاصله بین محتوای داخل تگ و border ایجاد میشه.
margin در CSS
خب حالا که با جایگاه margin و padding آشنا شدیم وقتشه که بریم به سراغ این دو و به اونها مقداردهی کنیم. تصویر زیر رو ببینید:
همونطور که در تصویر بالا میبینید من دو تگ h1 دارم که برای تگ h1 دوم مقدار 30 رو برای ویژگی margin تنظیم کردم. در خروجی مشخص است که تگ h1 دوم از هر چهار طرف چپ ، راست، بالا و پایین فاصله گرفته است.
نکته مهم: تنظیم border برای استفاده از margin هیچ ضرورتی ندارد و من در این مثال صرفا برای نمایش بهتر در خروجی از این ویژگی استفاده کردم.
کد کامل را در اینجا ببینید:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>جلسه ششم </title>
<style>
h1 {
border: 1px solid black;
background-color: aqua;
}
.with-margin{
margin:30px;
}
</style>
</head>
<body>
<h1>Mr.Ebi</h1>
<h1 class="with-margin">Mr.Ebi</h1>
</body>
</html>همونطور که در داخل کد میبینید، من برای مقداردهی ویژگی margin از یک عدد استفاده کردم. ما این امکان رو داریم که برای هر 4 جهت چپ، راست، بالا و پایین مقداردهی کنیم. زمانی که ما 1 عدد وارد میکنیم، مقدار وارد شده به هر 4 جهت اختصاص داده میشه. من میتونم با استفاده از همین ویژگی margin به طور مجزا برای هر جهت مقداردهی انجام بدم. مثال زیر رو ببینید:
.margin1{
margin: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
.margin2{
margin: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}همانطور که در توضیحات میبینید، من برای کلاس margin1 از 2 مقدار استفاده کردم. مقدار اول یعنی 5px به بالا و پایین و مقدار دوم یعنی 20px به چپ و راست نسبت داده میشه. در margin2 من از 4 مقدار استفاده کردم. طبق توضیحاتی که جلوی این خط نوشتم، اولین مقدار به بالا ، دومین مقدار به راست ، سومین مقدار به پایین و مقدار چهارم به margin سمت چپ نسبت داده میشه. به این ترتیب من تونستم هر margin رو بصورت مجزا مقداردهی کنم.
همچنین این امکان وجود داره که من با استفاده از ویژگی های زیر به صورت مجزا اقدام به مقداردهی به marginهای هر جهت کنم:
- margin-top
- margin-right
- margin-bottom
- margin-left
padding در CSS
ما با مفهوم padding در بالا آشنا شدیم. حالا وقتش رسدیه که بریم و نحوه مقدار دهی padding رو یاد بگیریم.. تصویر زیر رو ببینید:
همونطور که در تصویر بالا میبینید من دو تگ h1 دارم که برای تگ h1 دوم مقدار 30 رو برای ویژگی padding تنظیم کردم. در خروجی مشخص است که تگ h1 دوم از هر چهار طرف چپ ، راست، بالا و پایین فاصله گرفته است.
نکته مهم: تنظیم border برای استفاده از padding هیچ ضرورتی ندارد و من در این مثال صرفا برای نمایش بهتر در خروجی از این ویژگی استفاده کردم.
کد کامل را در اینجا ببینید:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>جلسه ششم </title>
<style>
h1 {
color:coral;
border: 1px solid black;
background-color:brown;
}
.with-padding {
padding :30px;
}
</style>
</head>
<body>
<h1>Mr.Ebi</h1>
<h1 class="with-padding ">Mr.Ebi</h1>
</body>
</html>همونطور که در داخل کد میبینید، من برای مقداردهی ویژگی padding از یک عدد استفاده کردم. ما این امکان رو داریم که برای هر 4 جهت چپ، راست، بالا و پایین مقداردهی کنیم. زمانی که ما 1 عدد وارد میکنیم، مقدار وارد شده به هر 4 جهت اختصاص داده میشه. من میتونم با استفاده از همین ویژگی padding به طور مجزا برای هر جهت مقداردهی انجام بدم. مثال زیر رو ببینید:
.padding1{
padding: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
.padding2{
padding: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}همانطور که در توضیحات میبینید، من برای کلاس padding1 از 2 مقدار استفاده کردم. مقدار اول یعنی 5px به بالا و پایین و مقدار دوم یعنی 20px به چپ و راست نسبت داده میشه. در padding2 من از 4 مقدار استفاده کردم. طبق توضیحاتی که جلوی این خط نوشتم، اولین مقدار به بالا ، دومین مقدار به راست ، سومین مقدار به پایین و مقدار چهارم به padding سمت چپ نسبت داده میشه. به این ترتیب من تونستم هر margin رو بصورت مجزا مقداردهی کنم.
همچنین این امکان وجود داره که من با استفاده از ویژگی های زیر به صورت مجزا اقدام به مقداردهی به padding های هر جهت کنم:
- padding-top
- padding-right
- padding-bottom
- padding-left
