حاشیه های CSS

ویژگی حاشیه های CSS به شما امکان می دهد فضای بیشتری را در اطراف عنصر انتخاب شده اضافه کنید:

p {
   margin: 10px 15px 10px 15px;
}

ایجاد فاصله کافی در اطراف موارد منو ، نوارهای پیمایش و سایر عناصر HTML ، ساختار کلی صفحه را روشن و بهبود می بخشد. بنابراین ، حاشیه های CSS امکان پیمایش و تعامل کاربر را برای کاربر آسان می کند.

توجه: با CSS margin vs padding اشتباه گرفته نشوید: margin فاصله خارج از مرزها را تنظیم می کند و padding این کار را در داخل عنصر انجام می دهد.

تنظیم مقادیر حاشیه CSS

هنگام استفاده از ویژگی حاشیه CSS ، می توانید حداکثر چهار مقدار تعریف کنید:

حاشیه: value1 value2 value3 value4؛

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

می توانید عرض را برای حاشیه CSS در واحد طول (مثلا پیکسل) یا درصد (در رابطه با بلوک ظرف) تعریف کنید. مقدار پیش فرض 0 0 0 0 است ، که هیچ حاشیه CSS را نشان نمی دهد.

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

دستکاری هر حاشیه CSS به صورت جداگانه

حاشیه CSS در واقع خلاصه ای برای چهار زیر خاصیت است:

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

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

برای اعمال حاشیه در بالای عنصر ، از margin-top استفاده کنید:

p {
   margin-top: 10px;
}

برای اعمال حاشیه در سمت راست یک عنصر ، از margin-right استفاده کنید:

p {
   margin-right: 5px;
}

برای اعمال حاشیه در پایین عنصر ، از margin-bottom استفاده کنید:

p {
   margin-bottom: 10px;
}

برای اعمال حاشیه در سمت چپ یک عنصر ، از margin-left استفاده کنید:

p {
   display: block;
   margin-left: 5px;
}

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

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