تخفیف ویژه

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

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

در جلسه قبل شما را  با دو خصوصیت margin و border  آشنا کردیم، گفتیم که برای ایجاد فاصله بین یک عنصر و عناصر اطراف آن باید از خصوصیت margin استفاده کرد و برای ایجاد خط حاشیه دور عنصر نیز از خاصیت border استفاده می‌کنیم، گفتیم که با استفاده از border-width عرض خط حاشیه، border-color رنگ خط حاشیه و با استفاده از border-style طرح خط حاشیه را می‌توانیم تعیین کنیم.

در این جلسه با یکی از دیگر خصوصیات border که در css3 معرفی شده است آشنا می‌شویم و آن هم border-radius است و برای خمیده کردن حاشیه‌ها استفاده می‌شود. و نیز با خصوصیات padding و height و width شما را آشنا خواهیم کرد.

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

خصوصیت border-radius

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

مثال:

<img src="images/img1.png" />

 

Img {
Border-top-left-radius: 50px;
Border-bottom-left-radius: 40px;
Border-top-right-radius: 30px;
Border-bottom-right-radius: 0px;
} 

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

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

می توان این خاصیت را در یک خط نیز کوتاه نویسی کرد  و قاعد کلی آن به شکل زیر است.

border-radius: top-left top-right bottom-right bottom-left;

مثال :

Img {Border-radius: 50px 5px 50px 5px; }

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

خصوصیت padding

خصوصیت padding مقدار فضای خالی بین محتوای یک عنصر و border آن عنصر را تعیین می‌کند. یکی از دو مقدار عددی یا درصدی را می‌پذیرد. (قواعد مقدار دهی آن همانند قواعد خصوصیت margin است ).

تفاوت‌های بین margin و padding

  1. Padding فضای خالی بین محتوا و border یک عنصر می‌باشد اما margin فضای خالی بین border و عناصر دیگر می‌باشد.
  2. کلمه کلیدی auto هیچ تاثیری روی خاصیت padding ندارد.
  3. خاصیت margin می‌تواند مقادیر منفی بگیرد اما خاصیت padding نمی‌تواند.
  4. در خاصیت padding تداخل و فروپاشی اتفاق نمی‌افتد، فقط در margin این اتفاق می‌افتد.

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

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

Padding: top right bottom left;

مثال :

P {
Padding: 3px 5px 2px 7px;
}

دستور بالا padding-top را برابر 3پیکسل ، padding-right را برابر 5 پیکسل، padding-bottom را برابر 2 پیکسل و padding-left را برابر 7 پیکسل تعریف می‌کند.

خصوصیت width

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

از خاصیت width می‌توان برای تخصیص یک مقدار کلی برای برخی عناصر input مثل دکمه‌های reset و submit استفاده کرد.

مثال :

Input.button {
Width: 10em;
}

دستور فوق عرض تمامی عناصر input با کلاس button را 10em در نظر می‌گیرد.

خصوصیت height

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

همانند خاصیت width از خاصیت height می‌توان برای مشخص کردن ابعاد یک تصویر استفاده کرد.

مثال :

Img.footer {
Width: 440px;
Height: 130px;
}

ابعاد min و max برای width و height

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

هنگامی که شما صفحه ای را اصولا برای نمایش در رزولوشن 800*600 یا 1024*768 طراحی می‌کنید، اگر کاربری سایت شما را با رزولوشن 1600*1200 مشاهده کند، صفحه را به شکلی نه چندان زیبا خواهد دید، یا هنگام استفاده از کلمه کلیدی auto یا مقادیر درصدی ممکن است مشاهده با رزولوشن‌های مختلف نتایج متفاوتی داشته باشد. در این مواقع استفاده از مقادیر min و max برای width و height می‌تواند مانع از تغییر ظاهر صفحه در رزولوشن‌های مختلف شود.

خصوصیت min

خاصیت min یکی از دو مقدار عددی یا درصدی را می‌پذیرد. و مقدار پیش فرض آن 0 است، این خصوصیت در ie6 و قبل از آن پشتیبانی نمی‌شود.

خصیوصیت min-width و mn-height محدودیت کوچکترین اندازه را برای یک عنصر مشخص می‌کنند، و از منقبض شدن عرض یا ارتفاع یک عنصر هنگام تغییر سایز پنجره مرورگر یا رزولوشن جلوگیری می‌کند.

مثال :

Body {
Min-width: 1024px;
}

در مثال فوق تعریف min-wdith:1024px; برای عنصر body مانع از منقبض شدن محتوای صفحه شده و صفحه scroll افقی پیدا می‌کند.

خصوصیت max

خصوصیت max  محدودیت بالاتر و حداکثر اندازه را برای یک عنصر مشخص می‌کند و هنگامی تعریف می‌شوند که ابعاد یک عنصر ممکن است افزایش یابند که با استفاده از این خصوصیات می‌توان مانع از منبسط شد و افزایش ابعاد عناصر شد. این خصوصیت یکی از سه مقدار عددی، درصدی یا auto  را می‌پذیرد.

مثال :

Body {
Max-width: 1440;
Max-height: auto;
}

 

خصوصیت overflow

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

و یکی از 4  مقدار زیر را می‌پذیرد:

  • Visible : مقدار پیشفرض و باعث نمایش محتوای سرریز شده می‌شود.
  • Hidden : محتوای سرریز شده پنهان می‌شود.
  • Scroll : محتوای سرریز شده را پنهان می‌کند و  قابلیت اسکرول شدن برای دیدن محتوای سرریز شده را فعال می‌کند
  • Auto :  اگر کم بودن عرض عنصر باعث سر ریز شدن باشد، اسکرول افقی و اگر کم بودن ارتفاع عنصر باعث سرریز شدن باشد اسکرول عمودی را برای عنصر فعال می‌کند.

مثال :

<div>
<h3> 7Learn: Javascript and Web Design Tutorials </h3>
<h3> 7Learn: Javascript and Web Design Tutorials </h3>
<h3> 7Learn: Javascript and Web Design Tutorials </h3>
<h3> 7Learn: Javascript and Web Design Tutorials </h3>
<h3> 7Learn: Javascript and Web Design Tutorials </h3>
</div>
div {
border: 1px solid #000;
width: 400px;
height: 140px;
overflow: auto;
}

overflow-x و overflow-y

این خصوصیات مشابه overflow می‌باشند و اجازه ی کنترل overflow را با scrollbar افقی یا عمودی به طور جداگانه در اختیار می‌گذارند.

بسیار خب تا به اینجا با همه ی فضاهای اطراف یک عنصر و خاصیت overflow نیز آشنا شدیم در فصل بعدی با خاصیت float یا شناور ساختن عناصر و خاصیت clear، و تراز افقی شما را آشنا خواهیم کرد.

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

جلسات دوره

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

aligh

دوست عزیز بیشترین مقدار border-radius
50 نیست .
من تا 500 هم امتحان کردم ، جواب داد

mhty

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

کیوان علی محمدی

سلام شما وقتی یه طول و عرض مشخص به اون تگ دایو بدید اینجوری میشه،شما باید خاصیت overflow رو با مقدار hidden به کار ببرید،یا اینکه میتونید مثلا خاصیت width رو تعریف کنید و خاصیت height رو تعریف نکنید.

yasila

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

سجاد دریس

سلام.
نیاز به مطلب خاص نداره.
border رو درنظر بگیرین، فاصله ی بین borderیک المنت با سایر المنت ها رو margin میگن، یا اگه المنتی border نداشت، فاصله بین دو المنت.
padding هم فاصله border) border فرضی) یک المنت تا متن (سایر عناصر) درون اون.
فکر نکنم چیز چندان سختی باشه این مطلب.

html
:-*
میدیا رستمی

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

mesmaeil

سلام
ممنون داداش
بی صبرانه منتظر ادامه مطلب هستم

کیوان علی محمدی

سلام سجاد عزیز،آقا ممنون عالی بود.

سجاد دریس

سلام کیوان جان، لطف داری

نیاز به لاگین

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