outlineهای CSS

outline، خطی است که اطراف عناصر و بیرون از لبه border کشیده می شود تا عنصر را برجسته تر کند.

پراپرتی outline، استایل، رنگ، و پهنای outline را تنظیم می کند.

مثال زیر چگونگی رسم یک outline را در اطراف عنصر نشان می دهد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p 
{border:1px solid red ;outline:green dotted thick;
}</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports the
outline property if a !DOCTYPE is specified.</p>
</body>
</html>

  Margin در CSS

پراپرتی margin، فضای اطراف عناصر را تعریف می کند.

margin، فضای اطراف عنصر (بیرون border) را پاک می کند. margin، رنگ پیش زمینه ندارد، و کاملا شفاف است.

margin بالا، راست، پایین، و چپ را می توان با استفاده از پراپرتی های جداگانه، بطور مستقل تغییر داد. برای تغییر همه marginها بطور همزمان، می توان از پراپرتی shorthand margin استفاده کرد.

Valueهای ممکن

Value

شرح

Auto

مرورگر ، margin  را تنظیم می کند . نتیجه این کار بستگی به مرورگر دارد.

Length

یک margin ثابت تعریف می کند .

%

یک  margin به صورت درصد عنصر در برگیرنده تعریف می کند.

 

Margin- ضلع های مجزا

در CSS، ایجاد borderهای مختلف برای ضلع های مختلف ممکن است.

 

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

 پراپرتی سریع نویسی Shorthand property margin

برای کوتاه کردن کد، می توان همه پراپرتی های border را می توان در یک پراپرتی خلاصه کرد. این پراپرتی، shorthand property نامیده می شود.

پراپرتی سریع نویسی برای همه پراپرتی های مارجین، "margin" است:

margin:100px 50px;

 

 پراپرتی مارجین ممکن است از یک تا چهار value داشته باشد:

margin: 25px 50px 75px 100px

    • margin بالا، 25px است
    • margin سمت راست، 50pxاست
    • margin پایین، 75px است
    • margin سمت چپ، 100px است

margin: 25px 50px 75px 

    • margin بالا، 25px است
    • margin های سمت راست و چپ، 50px هستند
    • margin پایین، 75px است

margin: 25px 50px 

    • margin های سمت بالا و پایین، 25px هستند
    • margin های سمت راست و چپ، 50px هستند

margin: 25px

همه marginها، 25px هستند

Padding در CSS

پراپرتی CSS padding، فضای بین border عنصر و محتوای عنصر را تعریف می کند.

Padding

padding، فضای اطراف محتوا (درون border) عنصر را پاک می کند. padding تحت تاثیر رنگ پیش زمینه عنصر است.

padding بالا، راست، پایین، و چپ را می توان با استفاده از پراپرتی های جداگانه، بطور مستقل تغییر داد. برای تغییر همه paddingها بطور همزمان، می توان از پراپرتی shorthand padding استفاده کرد.

Valueهای ممکن

Value

شرح

Length

یک margin ثابت تعریف می کند .

%

یک  margin به صورت درصد عنصر در برگیرنده تعریف می کند.

 Padding- ضلع های مجزا

در CSS، ایجاد paddingهای مختلف برای ضلع های مختلف ممکن است.

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

 پراپرتی سریع نویسی Shorthand property padding

برای کوتاه کردن کد، می توان همه پراپرتی های margin را می توان در یک پراپرتی خلاصه کرد. این پراپرتی، shorthand property نامیده می شود.

پراپرتی سریع نویسی برای همه پراپرتی های پدینگ، "padding" است:

padding:25px 50px;

 پراپرتی پدینگ ممکن است از یک تا چهار value داشته باشد:

padding: 25px 50px 75px 100px

    • padding بالا، 25px است
    • padding سمت راست، 50pxاست
    • padding پایین، 75px است
    • padding سمت چپ، 100px است

padding: 25px 50px 75px

    •  padding بالا، 25px است
    • padding های سمت راست و چپ، 50px هستند
    • padding پایین، 75px است

padding: 25px 50px

    • padding های سمت بالا و پایین، 25px هستند
    • padding های سمت راست و چپ، 50px هستند

padding: 25px

    • همه paddingها، 25px هستند