Categories: CSS طراحی سایت

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

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) فعالیت میکنم

View Comments

  • سلام
    يه سؤال داشتم. اگه لطف كنيد جواب بديد ممنون مي‌شم:
    چرا وقتي كه
    padding-top
    مربوط به يك
    div
    را زياد مي‌كنيم، اين مقدار در فايرفاكس به ارتفاع اون شيئ اضافه مي‌شه ولي در اينترنت اكسپلورر اين اتفاق نمي‌افته؟
    براي رفع اين مشكل بايد چه كار كرد؟
    براي مثال ارتفاع يك div را برابر با 70 پيكسل در نظر گرفتيم. وقتي كه 10 پيكسل به padding-top اين div‌ اضافه مي‌كنيم، ارتفاع اون در مرورگر فايرفاكس 80 پيكسل مي‌شود ولي در اينترنت اكسپلورر اين جوري نمي‌شه؟
    براي اينكه نماي واحدي در هر دو مرورگر داشته باشيم با اين تفاوت‌ها بايد چه كار كنيم؟

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

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

    • سلام
      [css]
      <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>
      [/css]
      به طور پیش فرض، خاصیت float برابر left است. پس اگر برای div داخلی، float:right بنویسید، border به سمت چپ می آید. ضمنا چون div داخلی را 100% گرفته اید، پس جایی برای border نمی ماند و مجبور است 2 پیکسل از div خارجی بیرون بیاید.
      می توانید مانند کدی که در بالا نوشتم، div داخلی را 99% بگیرید که border هم از div بیرون نزند

Comments are closed.

Recent Posts

  • اخبار سایت

شروعی دوباره برای زوپیرنت

با سلام. با عرض پوزش فراوان بدلیل غیبت طولانی ما که دلیل‌های ریز و درشتی داشت. خیلی خلاصه و سریع…

5 سال ago
  • اندروید

چگونه حافظه ی داخلی اندرویدتان را آزاد کنید

اکثر موبایل هایی که سیستم عامل اندروید بر رویشان نصب هست دارای حافظه داخلی محدودی هستند و بعد از مدتی…

6 سال ago
  • توییتر
  • فایرفاکس
  • فیس بوک

مدیریت تمام اکانت های شبکه های اجتماعیتان در یک برنامه

وقتی که فعالانه به زندگی مجازی بپردازید کم کم تعداد سایت های که عضو میشید زیاد خواهد شد مخصوصا سایت…

6 سال ago
  • PHP برنامه نویسی

آموزش PHP – حلقه ها – جلسه هفتم

در ادامه مبحث آموزش PHP امروز به آموزش حلقه ها می رسیم که با ذکر مثال دستوراتن While , for…

6 سال ago
  • بازی

چرا در هنگام بازی در ویندوز دچار مشکل می شوید؟

شاید برای شما پیش آمده باشد که بالاترین کارت گرافیک و قطعات سخت افزاری خوب دیگه ای را داشته باشید…

6 سال ago
  • ویکی پدیا

پربازدیدترین صفحات فارسی در ویکی پدیا ۲۰۱۲

با تمام شدن سال میلاد 2012 آماری از پر بازدید ترین صفحات ویکی پدیا در زبان ها مختلف ارائه شده…

6 سال ago