سلام به همراهان همیشگی کلاس برتر ، در این قسمت از آموزش CSS قرار است شما رو با نحوه کارکرد مارجین ، در استایل بخشیدن به فایل HTML آشنا کنیم ؛ با ما همراه باشید.
مارجین ها در CSS
از خصوصیات margin در CSS برای ایجاد فضای اطراف عناصر ، خارج از هر مرز مشخص شده استفاده می شود.
با CSS ، کنترل کاملی بر حاشیه ها دارید. ویژگی هایی برای تنظیم حاشیه برای هر طرف یک عنصر ( بالا ، راست ، پایین و چپ ) وجود دارد.
مارجین های فردی
CSS ویژگی هایی برای تعیین حاشیه ( مارجین ) برای هر طرف یک عنصر دارد :
تمام حاشیه ها می توانند خصوصیات مقادیر زیر را داشته باشند :
نکته : مقادیر منفی مجاز اند.
مثال :
برای هر چهار طرف عنصر <p> حاشیه های مختلفی تنظیم کنید :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
مارجین - مختصر نویسی
برای کوتاه کردن کد ، می توان تمام خصوصیات حاشیه را در یک ویژگی مشخص کرد.
ویژگی margin یک ویژگی مختصر برای خصوصیات حاشیه های فردی زیر است :
بنابراین ، نحوه کار آن به این شکل است :
اگر ویژگی margin چهار مقدار داشته باشد :
مثال :
از ویژگی مختصر نویسی حاشیه با چهار مقدار استفاده کنید :
p {
margin: 25px 50px 75px 100px;
}
اگر ویژگی margin دارای سه مقدار باشد :
مثال :
از ویژگی مختصر نویسی حاشیه با سه مقدار استفاده کنید :
p {
margin: 25px 50px 75px;
}
اگر ویژگی margin دارای دو مقدار باشد :
مثال :
از ویژگی مختصر نویسی حاشیه با دو مقدار استفاده کنید :
p {
margin: 25px 50px;
}
اگر ویژگی margin دارای یک مقدار باشد :
مثال :
از ویژگی مختصر نویسی مارجین با یک مقدار استفاده کنید :
p {
margin: 25px;
}
مقدار خودکار
می توانید خاصیت margin را به صورت خودکار تنظیم کنید تا عنصر درون آن به صورت افقی قرار گیرد .
سپس عنصر عرض مشخص شده را اشغال می کند ، و فضای باقی مانده به طور مساوی بین حاشیه چپ و راست تقسیم می شود.
مثال :
استفاده از حاشیه خودکار :
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
مقدار ارثی
این مثال اجازه می دهد تا مارجین سمت چپ عنصر <p class = "ex1"> را از عنصر والد (<div>) به ارث برسد :
مثال :
استفاده از مقدار ارثی
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
امیدوارم این مطلب هم برای شما مفید بوده باشد ؛ خوشحال میشیم اگر نظر یا انتقادی درید در زیر این مطلب برای ما به اشتراک بگذارید . موفق باشید
: