آموزش CSS – جلسه هفتم – border, outline, margin, padding

نویسنده: فرزاد ربیعی
تاریخ: ۱۳۹۰ - ۱۲ - ۱۷
دسته بندی: CSS طراحی سایت

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 به ۱۱۶ پیکسل تغییر پیدا کرد.

برچسب: - - - -

درباره ی

در زمینه CSS، ASP.Net و شبکه (MCITP) فعالیت میکنم

۵ نظر به “آموزش CSS – جلسه هفتم – border, outline, margin, padding” ثبت شده است

  1. مستانه گفت:

    سلام
    من دوتا div تودرتو دارم ، که widthداخلیه رو ۱۰۰% اندازهdiv مادر یا خارجی در نظر گرفتم، در حالت عادی div داخلی وسط div خارجی می افته اما وقتی به div داخلی border می دهم ، به اندازه ضخامت border به سمت راست صفحه حرکت می کنه و از div مادر کمی بیرون می زنه! و برای اینکه باز هم در وسط div خارجی قرارش بدهم باید مثلا left=-3px قرار بدهم!چرا این اتفاق می افته ؟

    • فرزاد ربیعی گفت:

      سلام

      <div style="top:20px;left:20px;width:200px;height:200px;background:gray;">
      		<div style="width:99%;height:99%;border:solid 1px red;float:right"></div>
      	</div>
      

      به طور پیش فرض، خاصیت float برابر left است. پس اگر برای div داخلی، float:right بنویسید، border به سمت چپ می آید. ضمنا چون div داخلی را ۱۰۰% گرفته اید، پس جایی برای border نمی ماند و مجبور است ۲ پیکسل از div خارجی بیرون بیاید.
      می توانید مانند کدی که در بالا نوشتم، div داخلی را ۹۹% بگیرید که border هم از div بیرون نزند

  2. asal گفت:

    خیلی خوب بود ممنون

  3. pirooz گفت:

    سلام
    یه سؤال داشتم. اگه لطف کنید جواب بدید ممنون می‌شم:
    چرا وقتی که
    padding-top
    مربوط به یک
    div
    را زیاد می‌کنیم، این مقدار در فایرفاکس به ارتفاع اون شیئ اضافه می‌شه ولی در اینترنت اکسپلورر این اتفاق نمی‌افته؟
    برای رفع این مشکل باید چه کار کرد؟
    برای مثال ارتفاع یک div را برابر با ۷۰ پیکسل در نظر گرفتیم. وقتی که ۱۰ پیکسل به padding-top این div‌ اضافه می‌کنیم، ارتفاع اون در مرورگر فایرفاکس ۸۰ پیکسل می‌شود ولی در اینترنت اکسپلورر این جوری نمی‌شه؟
    برای اینکه نمای واحدی در هر دو مرورگر داشته باشیم با این تفاوت‌ها باید چه کار کنیم؟

    • فرزاد ربیعی گفت:

      برای internet explorer 9 که من تست کردم مشکلی نداشت و با دادن padding-top به ارتفاع div اضافه میشود.
      می توانید برای internet explorer 8 یا ورژن های پایین تر، یک CSS جدا بنویسید تا کاربری که با internet explorer سایت شما را می بیند، با آن CSS خاص سایت شما را ببیند (در جلسات بعد این مطلب را خواهم گفت).
      ولی همانطور که در جلسه اول آموزش CSS گفته شد، internet explorer بــدتـــریـــن نوع سازگاری با CSS دارد.