حاشیه سازی در CSS

ویژگی حاشیه سازی در CSS فضای اطراف عنصر HTML را اضافه می کند. این منطقه حاشیه خارج از مرزها و سایر محتوای عناصر است.

دارایی حاشیه ای

مدل جعبه ای زیر نحوه تعامل قسمتهای جداگانه یک جعبه با یکدیگر را نشان می دهد. این مدل در CSS از چندین مولفه تشکیل شده است: محتوا ، padding و حاشیه.

حاشیه سازی در CSS چهار قسمت دارند:

• حاشیه بالا
• حاشیه درست است
• حاشیه-پایین
• حاشیه چپ

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

حاشیه در مقابل پدینگ

• حاشیه و پدینگ هم به مدل جعبه تعلق دارند.
• تفاوت اصلی این است که حاشیه فضای اطراف یک عنصر را اضافه می کند ، در حالی که padding باعث ایجاد فضای درون یک عنصر می شود.
• نمی توانید از مقدار خودکار استفاده کنید تا مرورگرها به طور خودکار پد را تنظیم کنند.
• بحث margin vs padding به این دلیل رخ می دهد که این اجزا مشابه هستند ، اما موارد استفاده از آنها متفاوت است.
• حاشیه عناصر را از بلوک های دیگر خارج از عنصر جدا می کند.
• padding باعث تغییر محتوای داخل عناصر از لبه ها می شود.

تنظیم یک یا چند مقدار

• حاشیه ها در CSS می توانند یک ، دو ، سه یا چهار مقدار داشته باشند:
• یک مقدار از حاشیه یکسانی برای همه طرف ها استفاده می کند.
• دو مقدار: حاشیه اول بالا و پایین را تنظیم می کند. دوم دو طرف چپ و راست را تنظیم می کند.
• سه مقدار: اول مجموعه بالا. دومی چپ و راست را تنظیم می کند. سوم پایین را تنظیم می کند.
• چهار مقدار: ترتیب مقادیر به همین ترتیب است – بالا ، راست ، پایین و چپ.

توجه: می توانید این مقادیر را با مقادیر length> (px ، cm ، mm ، in)> با درصد یا خودکار تنظیم کنید تا به مرورگرها اجازه دهید حاشیه های مناسب را انتخاب کنند. ارزشهای منفی حاشیه ها را به همسایگان نزدیک می کنند.

p {
    margin: 10px 20px 30px 70px; 
}

مثال بالا دارای هر چهار مقدار حاشیه است: 10px 20px 30px 70px ؛. CSS آن ها را به عنصر <p> به این ترتیب اختصاص می دهد:

• اندازه حاشیه بالا 10 پیکسل است
• اندازه حاشیه راست 20 پیکسل است
• اندازه حاشیه پایین 30 پیکسل است
• اندازه حاشیه چپ 70px است

در مثال زیر ، ما سه مقدار داریم: 10px 20px 30px ؛. ما این نتایج را خواهیم گرفت:

p {
    margin: 10px 20px 30px;
}

• اندازه حاشیه بالا 10 پیکسل است
• اندازه حاشیه راست و چپ 20 پیکسل است
• اندازه حاشیه پایین 30 پیکسل است

مثال زیر دو مقدار اختصاص می دهد: 10px 20px؛ به عنصر <p>:

p {
    margin: 10px 20px;
}

• اندازه حاشیه بالا و پایین هر کدام 10px است
• اندازه حاشیه راست و چپ هر کدام 20px است

برای تنظیم هر چهار حاشیه به صورت یکسان ، فقط باید یک مقدار مشخص کنید:

p {
    margin: 10px;
}

مثال زیر حاشیه های منفرد را با مقادیر مشخص شده در پیکسل نشان می دهد.

p { 
    margin-top: 40px;   
    margin-bottom: 70px;   
    margin-right: 140px;   
    margin-left: 90px;
}

مقدار خودکار CSS

خصوصیات حاشیه می توانند مقدار خودکار CSS را داشته باشند. این به مرورگر می گوید که حاشیه عناصر را با توجه به فضای موجود در کناره های عناصر تنظیم کند.

این مثال نحوه استفاده خودکار از CSS در ظروف <p> را نشان می دهد. ما عرض و حاشیه را نشان می دهیم تا عملکرد خاصیت حاشیه را بهتر نشان دهیم.

p {    
    width: 200px;
    margin: auto;
    border: 5px solid #e9385a;
}

توجه: مقدار خودکار مناسبترین حالت برای مرکزیت افقی است.

برای استفاده خودکار از CSS برای مرکزیت یک عنصر HTML به صورت افقی در فضای موجود ، این مراحل را بخاطر بسپارید:

• عرض یک عنصر را مشخص کنید.
• سپس ، برخی از حاشیه ها را به صورت خودکار تنظیم کنید.

نکته: اگر عرض را اضافه نکنید ، مقادیر خودکار با اختصاص 0 به حاشیه ، یا دادن فضای موجود از مورد اصلی ، هیچ تأثیری نمی گذارد.

برای مرکز دهی عمودی عناصر نباید از CSS خودکار استفاده کنید.

وراثت حاشیه ها

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

مثال زیر نشان می دهد که عنصر والد <div> مقدار مشخصی از حاشیه سمت چپ دارد و عنصر فرزند <p> دارای مقدار ارثی حاشیه سمت چپ است.

div.contain {
    border: 5px solid #e9385a;
    margin-left: 200px;
}

p.write {
    margin-left: inherit;
}

جمع شدن حاشیه توضیح داده شده است

هنگامی که حاشیه های بالا و پایین (یا عمودی) یکدیگر را لمس می کنند ، حاشیه CSS در حال سقوط است.

در مثال زیر ، <paragraph-one> قرار است حاشیه پایینی 70px داشته باشد. قرار است عنصر <paragraph-two> حاشیه بالایی در اندازه 50px داشته باشد. بنابراین حاشیه واقعی 70px است.

.paragraph-one {
    margin: 0 0 70px 0;
}

paragraph-two {
    margin: 50px 0 0 0;
}

در نتیجه فروپاشی ، چندین حاشیه یک حاشیه ایجاد می کند. بنابراین ، حاشیه های در حال فروپاشی روی هم قرار نمی گیرند بلکه به اندازه حاشیه بزرگتر به یک حاشیه تبدیل می شوند.

نکته: سقوط حاشیه هرگز برای حاشیه چپ و راست (یا افقی) رخ نمی دهد.

شرایطی که حاشیه سقوط اتفاق می افتد

• هم نژادها در کنار یکدیگر فرو می ریزند (فقط در صورتی که نیازی به پاکسازی شناورهای گذشته نداشته باشد).
• هیچ مرز ، محتوا ، پدینگ ، قالب بندی بلوک ، ارتفاع ، حداقل ارتفاع ، حداکثر ارتفاع یا سایر عناصر وجود ندارد که بالای حاشیه یک بلوک را از بالای حاشیه فرزندان آن جدا کند. این وضعیت باعث ایجاد حاشیه در خارج از والدین می شود.
• هیچ مرز ، محتوا ، پدینگ ، ارتفاع یا حداقل ارتفاع برای جدا کردن حاشیه از بالا و حاشیه وجود ندارد. در نتیجه ، حاشیه بالا و پایین بلوک سقوط می کند.

نکات مهم حاشیه سازی در CSS:

• برای تنظیم حاشیه و پر کردن ، نباید از واحدهای مطلق استفاده کنید زیرا آنها با عرض صفحه و اندازه های مختلف قلم تنظیم نمی شوند.
• برای عناصر موجود در HTML ، حاشیه می تواند منفی باشد. با این حال ، وقتی عناصر اندازه ثابت ندارند ، چنین تنظیماتی راحت نیستند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.