در جلسات قبلی آموزش CSS یاد گرفتیم که چطوری حاشیه برای المان درست کنیم . دو نوع دیگه حاشیه هم داریم برای المان ها توی CSS . یکی حاشیه خارجی هست که توی این جلسه از آموزش CSS بهش رسیدگی می کنیم و یکی دیگه هم حاشیه داخلی المان هست که بعدا یاد میگیریم .
حاشیه خارجی که از این به بعد بهش میگیم margin همونطوری که از اسمش مشخصه میاد یه حاشیه خارجی دور المان قرار میده تا المان های دیگه بهش نزدیک نشن و نچسبه بهش !
مثال زیر رو ببینین :
در اصل این حاشیه میاد بعد از حاشیه اصلی المان ایجاد میشه به سمت بیرون . با این ویژگی css میتونیم کنترل خوبی توی طراحی ها مون داشته باشیم . توی فواصل بین المان ها . در جلسه قبلی دوره آموزش CSS از بی اس دیزاین آکادمی هم با حاشیه های آشنا شدیم و یاد گرفتیم که حاشیه ها رو میشه برای هر چهار طرف یا سمت المان تعریف کنیم . برای حاشیه های خارجی یا همون margin هم میتونیم برای هر طرف المان مشخص کنیم چقدر فضا باید از اطراف داشته باشه .
این ویژگی با margin مشخص میشه و برای اینکه بتونیم برای یه سمت خاص فضا حاشیه خارجی بدیم از اسم اون طرف استفاده می کنیم یعنی برای حاشیه دادن به بالای المان از margin-top استفاده میکنیم .
چند حالت مختلف میتونیم مقدار دهی کنیم به حاشیه خارجی . یه حالت auto هست که حالت اتوماتیک هست . حالت بعدی میشه مقدار فاصله که با چند تا واحد تعریف میشه . بطور مثال : px, pt, cm و … یه حالت دیگه هم با درصد مشخص میشه که با علامت ٪ مشخص میکنیم که همونطوری که مشخصه میاد به درصد عرضی که داره حاشیه خارجی میندازه . دور المان. یه حالت آخر هم inherit هست که میاد از المان بالایی (منظور المانی هست که این تگ داخلش قرار گرفته نه سمت بالای اون المان ! ) این مقدار رو به ارث میبره .
نکته ای که وجود داره میتونیم این فاصله رو منفی بدیم ! یعنی اگه بخوایم یه المان رو بکشیم بالاتر مکانی که در حالت پیش فرض قرار داره میایم مقدار منفی میدیم و اون المان به جای اینکه فاصله مثبت بگیره فاصله منفی میگیره و المان میره بالاتر به میزانی که ما مشخص می کنیم براش . مثال زیر رو ببینین :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
کد کوتاه شده margin
مثل قابلیت هایی که قبلا یاد گرفتیم میتونیم این کد رو هم کوتاه کنیم که بیاد همه این مقدارهایی که میخوایم تک تک به اطراف المان بدیم رو یک جا توی یک سلکتور تعریف کنیم . ترتیب اولویت این کد ها هم اینجوریه که اول طرف بالا – راست – پایین و چپ رو باید کد بزنیم براش . مثال زیر رو ببینین :
p {
margin: 25px 50px 75px 100px;
}
توی مثال بالا الان حاشیه های اطراف المان های p اینجوری هست که از بالا ۲۵پیکسل – از راست ۵۰ پیکسل – از پایین ۷۵ پیکسل و از سمت چپ هم ۱۰۰ پیکسل فاصله داره این المان.
باز هم میشه برای بعضی کدها این رو خلاصه تر هم کرد . مثال زیر رو ببینین :
p {
margin: 25px 50px;
}
توی مثال بالا کد به این صورت هست که از سمت بالا و پایین ۲۵ پیکسل حاشیه خارجی در نظر میگیره و از سمت راست و چپ هم فاصله ۵۰ پیکسل در نظر میگیره و المان رو خروجی میکنه توی مرورگر .
یه حالت دیگه هم هست که یک عدد میزنیم واسه margin و این مقدار برای تمام اطراف المان ها یکسان پیاده سازی میشه :
p {
margin: 25px;
}
یه حالت دیگه هم وجود داره که زیاد استفاده نمیشه ازش . ولی باید بدونین . اگر المانی دیدین که سه تا مقدار براش در نظر گرفته شده که مقدار اول همون بالا هست و مقدار دوم برای راست و چپ و مقدار سوم برای پایین هست . مثال زیر رو ببینین :
p {
margin: 25px 50px 75px;
}
مقدار auto برای ویژگی margin
مقدار auto برای ویژگی margin میاد فاصله افقی از سمت راست و چپ رو اندازه یکسان میکنه و عرض المان رو هم محاسبه میکنه و المان رو وسط قرار میده . (روش های جدیدی اومده مثل flexbox و دیگه کسی زیاد ازین روش ها استفاده نمیکنه چون خیلی کارها رو سخت میکنه و اذیت کننده است. )
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
مقدار inherit برای ویژگی margin
مقدار inherit هم کار خاصی نمیکنه و فقط میاد برمیداره از المان بالایی المانی که داریم سلکتور میزنیم این مقادیر ویژگی رو میگیره. انگاری بهش میگیم بالا هرچی زدیم برو از اون بگیر. الان تو مثال پایین ما توی HTML یک المان div داریم و داخل اون هم اومدیم تگ p با ویژگی کلاس و مقدار ex1 رو گذاشتیم و حالا میایم به سلکتور p.ex1 میگیم برو margin-left المان بالایی رو بگیر که میشه همون div .
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
