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

جستجو ...


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

ثبت نام کنید

در دومین درس از آموزش CSS مقدماتی به بررسی خطوط حاشیه، پدینگ و عرض ارتفاع می‌پردازیم.


همانطور که می‌دانید، دانش HTML یکی از پیش نیازهای اصلی در آموزش CSS است. این دو جزء پایه‌ای آموزش طراحی سایت، همیشه در کنار هم قرار دارند و در واقع یادگیری CSS بدون اطلاع از عناصر مختلف HTML‌ امکان‌پذیر نخواهد بود. عناصر HTML در صفحه کنار هم قرار می‌گیرند تا یک صفحه وب را به نمایش بگذارند. فاصله بین عناصر مختلف (حاشیه)، خطوط مرزی عناصر (خط مرزی) و فاصله بین محتوا و خطوط مرزی (پدینگ) در آرایش و طراحی صفحات وب بسیار تاثیر گذار است. شما می‌توانید تمام این موارد را به راحتی و با اطلاع از قوانین CSS به تمام صفحات سایت خود وارد کنید.

تمام عناصر HTML به صورت یک جعبه در نظر گرفته می‌شوند و در CSS، زمانی که صحبت از طراحی و آرایش عناصر است، از عبارت «مدل جعبه» استفاده می‌شود. 

مدل جعبه در CSS، در واقع یک جعبه است که اطراف هر عنصر HTML قرار گرفته و شامل حاشیه، لبه مرزی، پدینگ و محتوای عنصر است. می‌توانید در تصویر زیر، مدل جعبه را مشاهده می‌کنید: 

مدل جعبه در CSS

در این آموزش قصد داریم درباره لبه مرزی، حاشیه و پدینگ صحبت کنیم. 

 خط مرزی یا border در CSS

خط مرزی

با استفاده CSS، شما می‌توانید استایل، رنگ و عرض خط مرزی هر عنصر را تعریف کنید.

استایل border

ویژگی border-style، مشخص می‌کند که چه نوع خط مرزی در صفحه سایت شما نمایش داده شود. انواع متفاوت آن در زیر فهرست شده است:

  • dotted: خط مرزی به صورت نقطه نقطه‌ای خواهد بود.
  • dashed: یک خط مرزی خط چین را ایجاد می‌کند.
  • solid: یک خط ممتد تعریف می‌کند.
  • double: یک خط دو لایه نمایش می‌دهد.
  • groove:  یک خط مرزی حاشیه دار ایجاد می‌کند. رنگ خط (border-color) بر نمایش حاشیه تاثیر می‌گذارد.              
  • ridge:  یک خط مرزی سه بعدی و برجسته ایجاد می‌کند. رنگ خط(border-color)  در نشان دادن برجستگی تاثیر دارد.
  • inset: یک خط مرزی سه بعدی ایجاد می‌کند که حالت فرورفتگی دارد و رنگ خط (border-color) در نمایش میزان فرورفتگی تاثیر دارد.
  • outset: یک خط مرزی سه بعدی همراه با برآمدگی ایجاد می‌کند. رنگ خط (border-color) در نشان دادن میزان برآمدگی آن، موثر است.
  • none: هیچ خط مرزی نمایش داده نمی‌شود.
  • hidden: خط مرزی را ایجاد می‌کند اما این خط پنهان است و نمایش داده نمی‌شود.

در تصویر زیر، انواع خطوط مرزی نشان داده شده است:

border‌در css

برنامه نویس می‌تواند خطوط مرزی جهات مختلف را به صورت متفاوت تنظیم کند. در این صورت باید چهار مقدار متفاوت برای ویژگی border-style مشخص شود که به ترتیب لبه مرزی بالا، راست، پایین و چپ را نشان می‌دهد.

اگر برنامه‌نویس بخواهد border هر چهار جهت صفحه سایت را مشابه یکدیگر تنظیم کند، بایستی تنها یک مقدار برای ویژگی border-style تنظیم شود.

در ادامه، سایر ویژگی‌های خطوط مرزی را بیان خواهیم کرد اما برای اینکه این ویژگی‌ها نمایش داده شود، شما حتما باید ویژگی border-style را تعریف کرده باشید.

عرض border

ویژگی border-width، پهنای هر یک از خطوط مرزی را مشخص می‌کند. برای مشخص کردن پهنای خطوط می‌توانید از واحدهای  px، pt، cm، em و غیره استفاده کنید یا می‌توانید از سه مقدار از پیش تعریف شده thin، medium یا thick استفاده کنید که به ترتیب خطوط باریک، متوسط و پهن را نمایش می‌دهند.

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

مشابه با ویژگی border-style، این ویژگی می‌تواند یک مقدار بگیرد که در این صورت هر چهار خط مرزی، عرض یکسانی خواهند داشت یا می‌تواند چهار مقدار مختلف داشته باشد که به ترتیب عرض خط مرزی بالا، راست، پایین و چپ را مشخص می‌کند.

رنگ border

ویژگی border-color در CSS، برای تنظیم رنگ هر چهار خط مرزی استفاده می‌شود. همانند ویژگی‌های بالا، این ویژگی می‌تواند یک مقدار یا چهار مقدار داشته باشد و اگر مقدار این ویژگی را تنظیم نکنید، رنگ خط مرزی مشابه رنگ عنصر خواهد بود.

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

خط مرزی خاص

در CSS، ویژگی‌هایی وجود دارد که خط مرزی هر یک از جهات را به صورت جداگانه مشخص می‌کند. در کد زیر، از این چهار ویژگی استفاده شده است:

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

نحوه عملکرد ویژگی border-style به صورت زیر خواهد بود:

  • اگر ویژگی border-style چهار مقدار داشته باشد، این مقادیر به ترتیب خطوط مرزی بالا، راست، پایین و چپ را نشان می‌دهند.  

Border-style: dotted solid double dashed;

    • خط مرزی بالا: dotted   
    • خط مرزی راست: solid 
    •  خط مرزی پایین: double   
    • خط مرزی چپ: dashed
  • اگر ویژگی border-style سه مقدار داشته باشد، این مقادیر به ترتیب خطوط مرزی بالا، راست (و چپ) و پایین را نشان می‌دهند.

border-style: dotted solid double;

    • خط مرزی بالا: dotted   
    • خط مرزی راست  و چپ: solid 
    •  خط مرزی پایین: double   
  • اگر ویژگی border-style دو مقدار داشته باشد، این مقادیر به ترتیب خطوط مرزی بالا (و پایین) و راست (و چپ) را نشان می‌دهند.

Border-style: dotted solid;

    • خط مرزی بال و پایین: dotted   
    • خط مرزی راست و چپ: solid 
  • اگر ویژگی border-style یک مقدار داشته باشد، این مقدار خط مرزی هر چهار جهت را نشان می‎دهد.

خط مرزی- ویژگی shorthand

برای کوتاه نویسی کد، می‌توانید تمام ویژگی های مربوط به خطوط مرزی را با ویژگی border تعریف کنید. برای این کار باید مقادیر زیر را  تعریف کنید:

  • عرض خط مرزی (border-width)
  • استایل خط مرزی (اجباری) (border-style)
  • رنگ خط مرزی(border-color)
p {
    border: 5px solid red;
}

شما همچنین می‌توانید، تمام این ویژگی ها را برای خطوط مرزی، به طور جداگانه تعریف کنید.   

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

border با لبه گرد

ویژگی border-radius برای نمایش خطوط مرزی با لبه گرد استفاده می‌شود. با تنظیم مقدار این ویژگی، می‌توانید مقدار گرد بودن لبه را مشخص کنید.

p {
    border: 2px solid red;
    border-radius: 5px;
}

نکته : ویژگی border-radius در IE8 و نسخه های قبل از آن، پشتیبانی نمی‌شود.

 حاشیه یا Margin در CSS

حاشیه، فضای بین عناصر و خارج از خطوط مرزی آنها است.

با استفاده از CSS، شما می‌توانید بر margin کنترل کامل داشته باشید. برای تنظیم میزان حاشیه در هر طرف از هر عنصر (بالا، راست، پایین و چپ) ویژگی‌های مختلفی وجود دارد.

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

تمام ویژگی‌های حاشیه می‌تواند یکی از مقادیر زیر را اتخاذ کند:

  • auto  : مرورگر میزان حاشیه را تنظیم می‌کند.
  • length : مقدار حاشیه را با یکی از واحدهای px، pt و cm و غیره مشخص می‌کند.
  • % : میزان حاشیه را برحسب درصدی از عرض عنصر مشخص می‌کند.
  • inherit -  این مقدار بیانگر آن است که میزان حاشیه این عنصر از عنصر والد به ارث می‌رسد.

نکته: مقادیر منفی هم در pdding مجاز هستند.

مثال زیر، مقدارهای متفاوتی را برای حاشیه‌های جهات مختلف عنصر <p>، تنظیم می‌کند. 

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

 ویژگی shorthand

برای کوتاه‌نویسی کد، می‌توانید ویژگی‌های حاشیه را در قالب ویژگی margin بیان کنید.

نحوه عملکرد ویژگی margin به صورت زیر است :

  • اگر margin چهار مقدار داشته باشد :

margin: 25px 50px 75px 100px;

  • حاشیه بالا: ۲۵ پیکسل
  • حاشیه راست: ۵۰ پیکسل
  • حاشیه پایین: ۷۵ پیکسل
  • حاشیه چپ: ۱۰۰ پیکسل
  •  اگر margin سه مقدار داشته باشد:

Margin: 25px 50px 75px;

  • حاشیه بالا: ۲۵ پیکسل
  • حاشیه راست و چپ: ۵۰ پیکسل
  • حاشیه پایین: ۷۵ پیکسل
  •  اگر margin دو مقدار داشته باشد:

margin: 25px 50px;

  • حاشیه بالا و پایین: ۲۵ پیکسل
  • حاشیه راست و چپ: ۵۰ پیکسل
  •  اگر margin تنها یک مقدار داشته باشد، حاشیه هر چهار طرف عنصر یکسان خواهد بود.

مقدار auto

اگر مقدار ویژگی margin برابر با مقدار auto باشد، عنصر موردنظر به صورت افقی در مرکز قرار می‌گیرد.

عنصر موردنظر، عرض مشخص شده را اشغال می‌کند و سپس فضای خالی باقیمانده به طور مساوی بین حاشیه‌های سمت راست و سمت چپ تقسیم می‌شود.

مقدار inherit

در نمونه کد زیر، حاشیه چپ عنصر <p calss=”ex1”> ، مقدار حاشیه خود را از عنصر والد خود یعنی <div> به ارث می‌برد.

div {
    border: 1px solid red;
    margin-left: 100px;
}

p.ex1 {
    margin-left: inherit;
}

 تغییر حاشیه

تغییر حاشیه

گاهی اوقات مقدار حاشیه‌های بالا و پایین به بزرگترین مقدار این دو حاشیه تغییر می‌کند. این مطلب درباره حاشیه‌های سمت راست و چپ اتفاق نمی‌افتد. تنها درباره حاشیه‌های بالا و پایین!

به عنوان نمونه، کد زیر را ببینید: 

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

 در نمونه کد بالا، حاشیه پایین عنصر <h1> برابر با ۵۰ پیکسل است و عنصر <h2>، حاشیه‌ای برابر با ۲۰ پیکسل دارد.

طبق کد به نظر می‌رسد که حاشیه عمودی بین دو عنصر <h1> و <h2> برابر با ۷۰ پیکسل (۵۰ پیکسل + ۲۰ پیکسل) است اما به دلیل تغییر حاشیه‌ای که توضیح داده شد، مقدار حاشیه عمودی بین دو عنصر، ۵۰ پیکسل است.

 پدینگ در CSS

پدینگ

 در CSS، از پدینگ برای ایجاد فاصله میان محتوای عنصر و لبه مرزی آن استفاده می‌شود.

با ویژگی‌های CSS می‌توانید مقدار پدینگ هر چهار جهت عنصر (بالا، راست، پایین و چپ) را تنظیم کنید. در زیر، این چهار ویژگی را می‌بینید:

  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left

تمام این ویژگی‌ها می‌توانند یکی از مقادیر زیر را بگیرد:

  • length- طول پدینگ را با یکی از واحدهای px، pt، cm و غیره نشان می‌دهد.
  • %- مقدار پدینگ را برحسب درصدی از طول عنصر نشان می‌دهد.
  • Inherit– مقدار پدینگ هر عنصر را برحسب پدینگ عنصر والد مشخص می‌کند.

نکته : مقادیر منفی نیز مجاز است.

در نمونه کد زیر، مقدار پدینگ برای چهار جهات عنصر <div> مشخص شده است:

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

ویژگی shorthand

برای کوتاه نویسی کد، می‌توانید به جای چهار ویژگی معرفی شده برای پدینگ، از ویژگی padding استفاده کنید. نحوه کار این ویژگی به صورت زیر است:  

  • اگر ویژگی padding چهار مقدار داشته باشد، این مقادیر به ترتیب پدینگ بالا، راست، پایین و چپ را نشان می‌دهد.

Padding: 25px 50px 75px 100px;

  • پدینگ بالا: ۲۵ پیکسل
  • پدینگ راست: ۵۰ پیکسل
  • پدینگ پایین: ۷۵ پیکسل
  • پدینگ چپ: ۱۰۰ پیکسل
  • اگر padding سه مقدار داشته باشید :

Padding: 25px 50px 75px;

  • حاشیه بالا: ۲۵ پیکسل
  • حاشیه راست و چپ: ۵۰ پیکسل
  • حاشیه پایین: ۷۵ پیکسل.
  • اگر padding دو مقدار داشته باشد:

Padding: 25px 50px;

  • حاشیه بالا و پایین: ۲۵ پیکسل
  • حاشیه چپ و راست: ۵۰ پیکسل

اگر padding، یک مقدار داشته باشد، پدینگ هر چهار جهت برابر با این مقدار خواهند بود.

پدینگ و عرض عنصر

در CSS، ویژگی width، مقدار عرض فضای محتوای عنصر را نشان می‌دهد. این فضا درون پدینگ، لبه مرزی و حاشیه عنصر قرار می‌گیرد.

بنابراین اگر عرض عنصری مشخص باشد، اضافه کردن پدینگ باعث اضافه شدن عرض عنصر می‌شود. به عنوان مثال در کد زیر، عرض عنصر ۳۰۰ پیکسل تنظیم شده است اما عرض واقعی آن  ۳۵۰ پیکسل (۳۰۰ پیکسل + ۲۵ پیکسل پدینگ چپ + ۲۵ پیکسل پدینگ راست) خواهد بود.

div {
    width: 300px;
    padding: 25px;
}

برای اینکه عرض عنصر را بدون توجه به مقدار پدینگ، 300 پیکسل حفظ کنید، لازم است از ویژگی box-sizing استفاده کنید. این ویژگی عرض عنصر را مطابق با مقدار تنظیم شده حفظ می‌کند و در صورت افزایش مقدار پدینگ، فضای محتوای عنصر را کاهش می‌دهد.

در کد زیر، از ویژگی box-sizing برای نگه داشتن عرض عنصر در مقدار 300 پیکسل استفاده شده است.

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

تنظیم عرض و ارتفاع

در CSS، از ویژگی‌های height و width برای تنظیم عرض و ارتفاع هر عنصر استفاده می‌شود. مقدار پیش فرض این دو ویژگی، auto است و به معنای آن است که مرورگر به صورت خودکار، عرض و ارتفاع عنصر ا مشخص کند.

اما برنامه نویس می‌تواند مقدار این دو ویژگی را با واحدهایی همچون px، cm و غیره یا به درصد (%) و برحسب درصدی از عرض و ارتفاع بلاک دربردارنده آن عنصر مشخص کند.  

به عنوان مثال، عنصر <div>، ارتفاعی برابر با ۲۰۰ پیسکل دارد و عرض آن برابر با۵۰% درصد عرض بلاک دارنده آن است.

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

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

تنظیم عرض بیشینه

ویژگی max-width برای مشخص کردن بیشینه مقدار عرض یک عنصراستفاده می‌شود.

ویژگی max-width را می‌توان با واحدهایی همچون px، cm و غیره بیان کرد و یا می‌توان آن را برحسب درصدی از عرض بلاک دربردارنده عنصر مشخص کرد. همچنین می‌توان مقدار آن را به none (که مقدار پیش فرض است) تنظیم کرد که به معنای آن است که عرض بیشینه‌ای برای این عنصر تعیین نشده است.

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

استفاده از max-width در این مواقع، می‌تواند به مرورگرهایی با پنجره کوچک، مانند مرورگرهای تلفن همراه، کمک کند.

نکته: مقدار max-width می‌تواند مقدار ویژگی width را بازنویسی کند.

در نمونه کد زیر، ارتفاع عنصر <div> برابر با ۱۰۰ پیکسل است و بیشینه این عنصر، ۵۰۰ پیکسل تنظیم شده است.

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

 در این درس از آموزش CSS مقدماتی، مدل جعبه در CSS را معرفی کردیم که شامل خطوط مرزی، حاشیه و پدینگ و عرض و ارتفاع عناصر است. همان طور که از مطالب این آموزش نیز برمی‌آید، تنظیم ویژگی‌های مرتبط با مدل جعبه در ظاهر نمایش عنصر و نحوه چینش عناصر مختلف در صفحه HTML و طراحی سایت بسیار موثر هستند.

اگر دوست دارید به یک طراح سایت حرفه‌ای تبدیل شوید، به شما پیشنهاد می‌کنیم دوره‌های مختلف آموزش طراحی سایت که در لیداوب برای شما منتشر می‌شوند را پیگیری کنید. برای این کار شما می‌توانید از دوره‌های پایه‌ای مثل آموزش HTML و آموزش CSS‌ استفاده کنید تا به مراحل پیشرفته‌تری مثل آموزش لاراول برسید و به یک طراح سایت حرفه‌ای تبدیل شوید.

منبع :

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های