زوپیرنت

border: برای این که بخواهید در طراحی وب سایت حاشیه داشته باشید، از آن استفاده می کنید. در حاشیه سه آیتم وجود دارد.
border-type: نوع خط حاشیه را مشخص می کند که شامل مقادیر زیر است:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
یکی از border-type های پر استفاده، solid است. خاصیت none، برای این است که هیچ border ی نمایش داده نشود و dotted خط را به صورت نقطه چین نمایش می دهد.
border-color: رنگ خط حاشیه را مشخص می کند
border-width: برای مشخص کردن پهنای خط به کار می رود که می توانیم با پیکسل آن را مشخص کنیم. مانند ۲px
یک مثال برای border با استفاده از id:
در بخش html:

<div id="myid">this is a text with border</div>

در بخش CSS:

#myid{
 width:100px;
 height:100px;
 border-style:solid;
 border-color:black;
 border-width:2px;
}

که خروجی شبیه شکل زیر خواهد بود

برای border، بهتر است width و height را هم مشخص کنیم. ضمنا سه خط بالا برای border را می توان خلاصه کرد و در یک خط نوشت.

border:2px black solid;

در مثال بالا، ما برای هر ۴ جهت (top, right, bottom, left) حاشیه را اعمال کردیم، ولی می توان برای هر جهت، یک border خاص تعریف کرد. مانند مثال زیر:

border-left:2px black solid;
border-top:2px grey dotted;

خروجی مانند شکل زیر خواهد بود:

پس فقط حاشیه سمت چپ و بالا تعیین شده است.
outline: این ویژگی هم مانند border می باشد با این تفاوت که از border بیرون تر است. مانند شکل زیر

خصوصیت های outline هم مانندborder است. مانند مثال زیر

outline:red solid 2px;

که خروجی اش مانند شکل زیر است (همانطور که می بینید outline قبل از border است و بیرون تر می باشد)

margin: فضایی خارج از border برای آن element را تعریف می کند که باید خالی باشد. برای این که مفهوم این ویژگی را متوجه شوید، از دو div استفاده می کنیم، که ابتدا بدون margin استفاده می شوند و در مثال بعدی با margin.
در صفحه html:

<div id="myid1">box 1</div>
<div id="myid2">box 2</div>

در CSS:

#myid1{
 width:100px;
 height:100px;
 border:2px black solid;
 }
 #myid2{
 width:100px;
 height:100px;
 border:2px gray solid;
 }

خروجی به صورت شکل زیر است:

حال ویژگی margin را به id ها اضافه می کنیم

#myid1{
 width:100px;
 height:100px;
 border:2px black solid;
 margin:5px;
 }
 #myid2{
 width:100px;
 height:100px;
 border:2px gray solid;
 margin:5px;
 }

و شکل زیر خروجی خواهد بود:

می بینید که فاصله ای مابین box ها افتاده است. خود margin شامل چهار جهت top, right, bottom, left می باشد. وقتی مانند مثال بالا می نویسیم:

margin: 5px;

یعنی در هر چهار جهت ۵ پیکسل فاصله بیاندازد. می توانیم آن را به صورت زیر بنویسیم

margin: 5px 5px 5px 5px;

ترتیب حالت بالا، از سمت چپ به صورت top, right, bottom, left است.
یا این که فقط برای جهت های خاص از آن استفاده کنیم، مانند:

margin-left: 3px;

padding: برای فاصله انداختن بین border و element است. برای این کار مثال زیر را یک بار بدون padding و بار دیگر با padding تست می کنیم.
در صفحه html:

<div id="myid">this is a test for padding</div>

در صفحه CSS

#myid{
 width:100px;
 height:100px;
 border:2px black solid;
 }

خروجی شکل زیر است:

حال ویژگی padding را به کد CSS اضافه می کنیم:

#myid{
 width:100px;
 height:100px;
 border:2px black solid;
 padding:8px;
 }

که خروجی شکل زیر است:

همانطور که در شکل معلوم است، فاصله مابین نوشته ها و border به فاصله ۸ پیکسل زیاد شده است. padding هم مانند margin است و می تواند در چهار جهت تعریف شود و وقتی می نویسیم

padding: 8px;

یعنی در هر چهار جهت به اندازه ۸ پیکسل فاصله قرار بده. نکته دیگری که باید به آن توجه شود این است که با اعمال خصوصیت padding، با توجه به جهت هایی که ما می نویسیم، به width و یا height جعبه ما اضافه می شود. در مثال قبل با اینکه width و height را ۱۰۰ پیکسل تعریف کردیم، ولی با اعمال padding به هر چهار جهت، width و height به ۱۱۶ پیکسل تغییر پیدا کرد.