فضاهای اطراف عنصر

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

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

box model <a  style=آموزش CSS (فصل پنجم جلسه 1) : فضاهای اطراف عنصر" title="box-model" width="500" height="400" />

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

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

خصوصیت margin

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

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

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

مثال :

1 Body { margin-top: 0; }

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

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

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

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

مثال :

1 Body { margin : 5px; }

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

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

مثال :

1 P { margin : 2px 5px; }

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

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

مثال :

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

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

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

مثال :

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

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

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

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

1 <div>
2 <a href="#">Link 1 </a>
3 <a href="#">Link 2 </a>
4 <a href="#">Link 3 </a>
5 <a href="#">Link 4 </a>
6 <a href="#">Link 5 </a>
7 </div>
8  
9 <a href="#">Link 1 </a>
10 <a href="#">Link 2 </a>
11 <a href="#">Link 3 </a>
12 <a href="#">Link 4 </a>
13 <a href="#">Link 5 </a>

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

1 div a {
2 Margin-right: 10px;
3 }
4 div {
5 margin-bottom: 20px;
6 }

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

margin <a  style=آموزش CSS (فصل پنجم جلسه 1) : فضاهای اطراف عنصر" title="margin" width="309" height="207" />

در 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 نیز کاربرد زیادی دارد و برای چینش عناصر در وسط، چپ، یا راست استفاده می شود  به مثال زیر دقت کنید :

1 Margin : 0 auto 0 0;      /* Left-Align */
2  
3 Margin : 0 auto;          /* Center Align */
4  
5 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 در اینجا نیز صدق می کنند.

مثال :

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

 

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

border width <a  style=آموزش CSS (فصل پنجم جلسه 1) : فضاهای اطراف عنصر" title="border-width" width="411" height="204" />

خاصیت border-color

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

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

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

مثال :

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

 

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

border color <a  style=آموزش CSS (فصل پنجم جلسه 1) : فضاهای اطراف عنصر" title="border-color" width="411" height="204" />

خصوصیت border-style

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

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

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

مثال : کد html

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

و کد css زیر  :

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

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

border style <a  style=آموزش CSS (فصل پنجم جلسه 1) : فضاهای اطراف عنصر" title="border-style" width="411" height="225" />

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

قاعده کلی

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

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

مثال :

1 P {
2 Border: 3px dashed red;
3 }

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

مثال :

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

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

ارسال نظر