آموزش CSS (فصل پنجم - جلسه 1) : فضاهای اطراف عنصر

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۱۳ آذر ۱۳۹۱

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

در این قسمت از آموزش css با پنج ویژگی دیگر آشنا خواهیم شد، که به فضا‌های اطراف عنصر مربوط می‌شوند و عبارتنداز : margin و padding و  border و height و width .

برای آشنایی بهتر با این خصوصیات و مکان قرارگیری هر کدام در اطراف یک عنصر به تصویر زیر دقت کنید:

خب اگر گیج شدید کمی درمورد تصویر توضیح میدهیم : در وسط قسمت سفید رنگ عنصر ما قرار دارد که هر عنصری نیز ارتفاع (height) و عرض (width) مشخصی دارد. برای تعیین فاصله متن درون عنصر از  حاشیه (border)، از padding استفاده میشود. Border هم که حاشیه دور عنصر است، و margin نیز فاصله عنصر از عناصر اطراف آن را مشخص می‌کند.

حال به تعریف دقیق‌تر به همراه مثال برای هر خاصیت می‌پردازیم :

فهرست محتوای این مقاله

خصوصیت margin

این خصوصیت فضای خالی بیرونی عناصر را مشخص می‌کند، یعنی فضای خالی بین عنصر و پنجره ی مرورگر یا فضای خالی بین دو عنصر را مشخص می‌کند. یکی از سه مقدار عددی، درصدی یا auto را می‌پذیرد:

  • Margin-top : فاصله بالای عنصر را مشخص می‌کند.
  • Margin-right : فاصله سمت راست عنصر را مشخص می‌کند.
  • Margin-bottom : فاصله پایینی عنصر را مشخص می‌کند.
  • Margin-left : فاصله سمت چپ عنصر را مشخص می‌کند.

مقدار پیشفرض auto  می باشد در ضمن استفاده از مقادیر منفی نیز مجاز است.

مثال :

Body { margin-top: 0; }

دستور فوق حاشیه بالای سند را حذف می‌کند.

درضمن می‌توان بجای نوشتن هر چهار خصوصیت از حالت کوتاه نویسی نیز استفاده کرد. در حالت کوتاه نویسی می‌توان از یک تا چهار به مقدار به خصوصیت margin داد.

کوتاه نویسی خصوصیت Margin

در صورت استفاده از یک مقدار در کوتاه نویسی این مقدار به هر چهار فاصله بیرونی تخصیص خواهد یافت.

مثال :

Body { margin : 5px; }

دستور فوق تمامی فاصله‌های بیرونی عنصر body  را (top , right , bottom , left) را برابر 5px قرار می‌دهد.

هنگام استفاده از دو مقدار در کوتاه نویسی مقدار اول bottom , top و مقدار دوم right , left را مشخص می‌کند.

مثال :

P { margin : 2px 5px; }

دستور فوق فاصله بالا و پایین (top , bottom) را برابر 2px و حاشیه چپ و راست را (right , left) را برابر 5px  تعریف می‌کند.

در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left، مقدار سوم right و مقدار چهارم bottom را مشخص می‌کند.

مثال :

Body {margin: 20px 30px 40px; }

دستور فوق top  را برابر 20px، خصوصیت left  و right را برابر 30px و مقدار سوم bottom را برابر 40px قرار می‌دهد.

در صورت استفاده از چهار مقدار در کوتاه نویسی مقدار اول top مقدار دوم right مقدار سوم bottom و مقدار چهارم left  را مشخص می‌کند.

مثال :

Body { margin : 2px 3px 5px 4px; }

دستور فوق top  را برابر 2px، مقدار right را برابر 3px، مقدار bottom را برابر 5px و مقدار left را برابر 4px  قرار می‌دهد.

حال برای آشنایی با کاربرد این خصوصیت به مثال زیر دقت کنید :

کد html زیر را در نظر بگیرید :

<div>
<a href="#">Link 1 </a>
<a href="#">Link 2 </a>
<a href="#">Link 3 </a>
<a href="#">Link 4 </a>
<a href="#">Link 5 </a>
</div>

<a href="#">Link 1 </a>
<a href="#">Link 2 </a>
<a href="#">Link 3 </a>
<a href="#">Link 4 </a>
<a href="#">Link 5 </a>

حال میخواهیم بین لینک هایی که در داخل div قرار دارند، و بین لینک‌های داخل div لینک هایی در زیر آن‌ها قرار دارند فاصله ایجاد کنیم یعنی باید از دو خصوصیت margin-bottom و margin-right استفاده کنیم

div a {
Margin-right: 10px;
}
div {
margin-bottom: 20px;
}

نتیجه در مرورگر :

در margin عمودی یعنی marign-top و margin-bottom امکان فروپاشی یا تداخل حاشیه‌ها وجود دارد؛ این تداخل زمانی اتفاق می‌افتد که margin-top یا margin-bottom از یک عنصر با margin-bottom یا margin-top از عنصر دیگر برخورد داشته باشد. اگر تداخل حاشیه‌ها اتفاق بیافتد فاصله بین دو عنصر بسیار بیشتر از چیزی می‌شود که انتظار داشتیم، هنگامی که چنین اتفاقی بیافتد فقط حاشیه‌های عنصر با مقدار margin بزرگتر اعمال خواهند شد و حاشیه‌های عنصر با margin کوچکتر در نظر گرفته نشده و حذف می‌شود.

اگر عنصری فرزند عنصر دیگری باشد و به هر دو عنصر margin-top یا margin-bottom اختصاص داده باشیم در این صورت نیز تداخل فاصله‌های بیرونی پیش خواهد آمد و margin عنصر پدر صرف نظر از کوچکتر بودن یا بزرگتر بودن اعمال خواهد شد و margin عنصر فرزند در نظر گرفته نخواهد شد و حذف می‌شود.

می توان با تعریف padding یا border متناسب با محل تداخل برای عنصر پدر از برخورد دو margin در عناصر پدر و فرزند جلوگیری کرد.

نکته :
  1. این قاعده‌های کوتاه نویسی در خصوصیت‌های padding و border نیز به همین شکل به کار می‌روند.
  2. معمولا در حالت کوتاه نویسی از دو یا چهار مقدار استفاده می‌شود و استفاده از سه مقدار چون گیج کننده است توصیه نمی‌شود.
  3. در حالت کوتاه نویسی چهار مقدار در جهت عقربه‌های ساعت تخصیص می‌یابند. یعنی همان 12، 3 ، 6، 9 به این صورت که اول top سپس right سپس bottom و در آخر left.

استفاده از مقدار auto در margin نیز کاربرد زیادی دارد و برای چینش عناصر در وسط، چپ، یا راست استفاده می‌شود  به مثال زیر دقت کنید :

Margin : 0 auto 0 0;      /* Left-Align */

Margin : 0 auto;          /* Center Align */

Margin : 0 0 0 auto;     /* Right Align */

در مثال فوق خط اول باعث چپ چین شدن عنصر، خط دوم باعث  وسط چین شدن عنصر و خط سوم باعث راست چین شدن عنصر می‌شود.

خصوصیت Border

Border یا حاشیه، در واقع بین margin و padding قرار گرفته و یک خط به دور عنصر مورد نظر می‌کشد و خود به چهار قسمت تقسیم می‌شود.

  • Border-width : پهنای خط دور عنصر را مشخص می‌کند
  • Border-color : رنگ خط دور عنصر را مشخص می‌کند.
  • Border-style : طرح خط دور عنصر را مشخص می‌کند.

حال به تعریف دقیق این سه قسمت وآشنا شدن با همه ی اجزای آن‌ها می‌پردازیم :

Border Width

از خاصیت border-width برای مشخص کردن پهنا یا عرض کادر یک عنصر استفاده می‌شود که یکی از مقادیر زیر را میگیرد :

  • Thin : باریک، برابر با 1px
  • Medium : متوسط برابر با 3px
  • Thick : پهن، برابر با 5px
  • مقدار عددی دلخواه برحسب یکی از واحدهای محاسباتی که معمولا px است.

و مقدار پیشفرض این خصوصیت medium  می باشد.

نکته :
  1. مقادیر منفی برای این خصوصیت مجاز نیست
  2. مقادیر درصدی نیز برای این خصوصیت قابل استفاده نیست، کلمات کلیدی نیز به ندرت استفاده میشود. معمولا از واحد pixel برای مقدار دهی به این خاصیت استفاده می‌شود.
  3. همانند margin در کوتاه نویسی این خصوصیت می‌توان از یک تا چهار مقدار استفاده کرد و قواعد گفته شده در کوتاه نویسی margin در اینجا نیز صدق می‌کنند.

مثال :

<h1>7learn : Javascript and Web Design Tutorials </h1>

 

H1 {
border-width: 2px 5px 7px 9px;
}

 

خاصیت border-color

این خاصیت برای مشخص کردن رنگ border استفاده می‌شود. و یکی از مقادیر هگزادسیمال rbg , rgba ، کلمات کلیدی رنگ‌ها یا  transparent(شفاف - بدون رنگ) را به عنوان مقدار می‌پذیرد

مقدار پیشفرص برای این خصوصیت برابر با مقدار تعیین شده در خصوصیت color از عنصر مورد نظر می‌باشد.

نکته :
  1. در حالت کوتاه نویسی می‌توان چهار طرف border را در یک خط و به صورت جداگانه مقدار دهی کرد. (همانند کوتاه نویسی خصوصیت margin)
  2. در ie6 و ie7 کلمه کلیدی transparent برای border-color پذیرفته نمی‌شود.
  3. در ie 7 کلمه کلیدی transparent به صورت black (سیاه) تفسیر می‌شود.

مثال :

<h1>7learn : Javascript and Web Design Tutorials </h1>

 

H1 {
border-width: 2px 5px 7px 9px;
border-color: black green red yellow;
}

خصوصیت border-style

این خاصیت برای یک border باید تخصیص یابد تا border به نمایش در آید، و طرح خط دور عنصر را مشخص می‌کند که یکی از مقادیر زیر را می‌گیرد :

None , dotted , dashed , solid , double , hidden , groove , ridge , inset , outset

مقدار پیشفرض : none ( بدون خط حاشیه )

مثال : کد html

<h1> 7Learn: Javascript and Web Design Tutorials </h1>

و کد css زیر  :

h1 {
border-width: 2px 5px 7px 9px;
border-color: black red green pink;
border-style: solid dashed dotted double;
}

نتیجه در مرورگر :

کوتاه نویسی خاصیت border

قاعده کلی

Border: border-width border-style border-color;

ترتیب مقدار دهی به این خاصیت مهم بوده و جا به جایی در آن باعث از کار افتادن کد می‌شود.

مثال :

P {
Border: 3px dashed red;
}

این دستور border هر چهار طرف عنصر را مشخص می‌کند اما شما می‌توانید از این از این کوتاه نویسی برای هر از چهار طرف استفاده کنید :

مثال :

P {
Border-top: 3px dashed red;
Border-right: 2px solid green;
Border-bottom: 5px dotted black;
Border-left 1px groove yellow;
}

 بسیار خب تا به اینجا شما با دو فضا از فضای اطراف هر عنصر آشنا شدید در جلسه بعدی شما را با سه خصوصیت دیگر یعنی padding و height و width آشنا خواهیم کرد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

MM888

سلام.
لطفا این نکته مهم رو به متن اضافه کنید:
وقتی با استفاده از مقدار auto برای خصوصیت margin عنصر رو راست چین، وسط چین و چپ چین می کنیم، حتما باید با خصوصیت width عرض مشخصی برای عنصر تعیین کنیم (توی تگ HTML اون نه، توی CSS) وگرنه کد کار نمی کنه.
حالا سوال من اینه که چجوری کاری کنیم که بدون تعیین عرض کد کار کنه یا نیازی نباشه ما عرض رو تعیین کنیم، خودش عرض اصلی فایل رو تعیین کنه؟

yesterday

آقا سجاد سلام
با تشکر ویژه بابت آموزش مکفی شما
آیا فکر نمی کنید که این عبارت «در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left، مقدار سوم right و مقدار چهارم bottom را مشخص می کند.» دارای اشکال است، زیرا اگر ما سه مقدار در کوتاه نویسی دادیم، مقدار چهارم دیگر چیست؟ در هر حال، اگر سه مقدار دهیم، هر مقدار مربوط به کدامیک از جهات چهارگانه است؟
با تشکر

سجاد دریس

سلام.
بله اشکال در جمله هست که باید به این صورت باشه «در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left و right و مقدار سوم bottom را مشخص می کند.»

[email protected]

سلام …
من مقدار auto در خاصیت margin رو متوجه نشدم چیکار میکنه ..
میشه با یه مثال بهم توضیح بدید؟

سجاد دریس

سلام.
مثال زیر رو ببینید،
http://uploadtak.com/images/p936_margin.rar
کدهارو بخونید متوجه خواهید شد.

gtanori

عالی بود فقط یه چیزی شما کل مباحث سی اس اس رو می خواهید بگید

لقمان آوند

ان شاءالله …

fatima61

سلام
خیلی ممنون خیلی خوب بود .

محمود

اگه لطف کنید سایه پیش فرض متن مطالب رو بردارید ممنون میشم. کور میشه آدم اگه بخواد چند خط بخونه واسه همین بیخیال خوندن میشه.
مرسی

لقمان آوند

سلام جناب محمود
چشم ، سایه متن بسیار کمرنگ شد.
ممنون از پیشنهادتون .
موفق باشید

محمود

سلام
سایت به این شیکی واقعا نوبره!!!
😯

لقمان آوند

عالی بود سجاد جان .
مثل آموزش های قبلی …

سجاد دریس

مرسی لقمان عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.