جلسه نهم: خاصیت‌های پرکاربرد CSS؛ width، height و display

سلام دوستان! توی این جلسه قراره سه مورد از خاصیت‌های پرکاربرد CSS یعنی width، height و display رو یاد بگیریم. با دو خاصیت اول اندازه المان‌ها رو کنترل می‌کنید و با display مشخص می‌کنید هر المان چطور توی صفحه قرار بگیره. در کنارش با واحدهای اندازه‌گیری، محدود کردن اندازه و چیدمان‌های Flex و Grid هم آشنا می‌شید.

همه‌چیز رو با مثال‌های ساده جلو می‌بریم تا حتی اگه تازه یادگیری CSS رو شروع کردید، بتونید کدها رو بنویسید و نتیجه رو ببینید. آخر جلسه هم یک تمرین مرحله‌به‌مرحله داریم تا مطالب بهتر توی ذهنتون بمونن.

خاصیت‌های پرکاربرد CSS در این جلسه

در جلسه قبل با CSS Reset و خاصیت‌های color، background، margin و padding آشنا شدید. اگه هنوز ساخت فایل CSS و وصل کردن اون به صفحه HTML براتون مبهمه، اول آموزش ساخت فایل CSS و اتصال به HTML رو ببینید.

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

خاصیت width برای تنظیم عرض المان

width چطور عرض المان رو مشخص می‌کنه؟

خاصیت width عرض بخش محتوای یک المان رو مشخص می‌کنه. برای نمونه، وقتی به یک جعبه width: 300px می‌دید، عرض محتوای اون ۳۰۰ پیکسل می‌شه.

اگه padding یا border هم داشته باشید، ممکنه اندازه نهایی جعبه از مقدار width بیشتر بشه. برای ساده‌تر شدن محاسبه‌ها معمولاً از box-sizing: border-box استفاده می‌کنیم. با این تنظیم، حاشیه داخلی و کادر داخل عرض تعیین‌شده حساب می‌شن.

مقدارهای پرکاربرد width

• px: یک عرض ثابت بر پایه پیکسل می‌ده. برای جزئیات کوچکی مثل آیکن یا کادر باریک مناسبه.
• %: عرض رو معمولاً نسبت به عرض المان دربرگیرنده یا همون والد حساب می‌کنه.
• rem: اندازه رو نسبت به اندازه فونت المان ریشه صفحه حساب می‌کنه.
• vw: هر یک واحد اون برابر با یک درصد عرض بخش قابل‌مشاهده مرورگره.
• auto: اجازه می‌ده مرورگر با توجه به نوع المان و فضای موجود، عرض مناسب رو حساب کنه.
• min-content: عرض رو تا کوچک‌ترین اندازه‌ای کم می‌کنه که محتوا اجازه می‌ده.
• max-content: فضای لازم برای نمایش طبیعی محتوا بدون شکستن اختیاری خط رو در نظر می‌گیره.
• fit-content: اندازه رو با محتوای المان هماهنگ می‌کنه، ولی نمی‌ذاره بی‌دلیل از فضای در دسترس بزرگ‌تر بشه.

یک مثال ساده برای استفاده از width

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

.card {  box-sizing: border-box;  width: 80%;  max-width: 600px;  padding: 20px;  margin: 0 auto;}

margin: 0 auto هم فضای خالی دو طرف جعبه رو تقسیم می‌کنه و اون رو وسط قرار می‌ده. حالا با کوچک و بزرگ کردن مرورگر می‌بینید که عرض کارت تغییر می‌کنه، ولی از سقفی که تعیین کردید بالاتر نمی‌ره.

خاصیت height برای تنظیم ارتفاع المان

height چطور ارتفاع المان رو مشخص می‌کنه؟

خاصیت height ارتفاع بخش محتوای المان رو تعیین می‌کنه. در بیشتر بخش‌های متنی بهتره ارتفاع رو روی auto نگه دارید تا جعبه با زیاد شدن محتوا بلندتر بشه. ارتفاع ثابت ممکنه باعث بیرون زدن یا بریده شدن متن بشه.

مقدارهای پرکاربرد height

• px: ارتفاع ثابتی می‌ده و برای بخش‌هایی با اندازه دقیق کاربرد داره.
• rem: ارتفاع رو با اندازه فونت ریشه مرتبط می‌کنه.
• vh: هر واحد اون برابر با یک درصد ارتفاع بخش قابل‌مشاهده مرورگره.
• auto: ارتفاع رو با محتوا و قواعد چیدمان هماهنگ می‌کنه.
• %: ارتفاع رو نسبت به ارتفاع بلوک دربرگیرنده حساب می‌کنه، ولی معمولاً والد باید ارتفاع مشخصی داشته باشه.

برای مثال، اگه فرزند height: 50% داشته باشه ولی ارتفاع والد مشخص نباشه، مرورگر در خیلی از چیدمان‌های عادی نمی‌تونه اون ۵۰ درصد رو به یک عدد روشن تبدیل کنه. در این شرایط مقدار درصدی ممکنه مثل auto رفتار کنه.

یک مثال ساده برای استفاده از height

.parent {  height: 400px;  background: #eeeeee;}.child {  height: 50%;  background: #4f46e5;}

ارتفاع والد ۴۰۰ پیکسله، پس ارتفاع فرزند ۵۰ درصد اون یعنی ۲۰۰ پیکسل می‌شه. اگه خط height: 400px رو از والد بردارید، نتیجه ممکنه دیگه چیزی نباشه که انتظار دارید.

تفاوت واحدهای px، %، rem، vw و vh

چه زمانی از px استفاده کنیم؟

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

درصد نسبت به چه المانی محاسبه می‌شه؟

درصد همیشه نسبت به پنجره مرورگر نیست. برای width، درصد معمولاً نسبت به عرض بلوک دربرگیرنده حساب می‌شه. پس اگه والد ۸۰۰ پیکسل عرض داشته باشه، فرزندی با width: 50% معمولاً ۴۰۰ پیکسل عرض می‌گیره.

برای height هم درصد به ارتفاع بلوک دربرگیرنده وابسته‌ست. تفاوت مهم اینه که ارتفاع والد معمولاً باید قابل محاسبه و مشخص باشه.

واحدهای rem، vw و vh چه کاربردی دارن؟

rem به اندازه فونت ریشه صفحه وابسته‌ست. اگه اندازه فونت ریشه ۱۶ پیکسل باشه، 2rem برابر با ۳۲ پیکسل می‌شه. این واحد برای فاصله‌ها و اندازه‌هایی که باید با مقیاس کلی صفحه هماهنگ بمونن خیلی کاربردیه.

vw به عرض و vh به ارتفاع بخش قابل‌مشاهده مرورگر وابسته‌ست. مثلاً width: 50vw یعنی نصف عرض صفحه قابل‌مشاهده و height: 100vh یعنی به‌اندازه کل ارتفاع اون. توی موبایل بهتره نتیجه واحدهای وابسته به صفحه رو روی چند مرورگر بررسی کنید، چون نوارهای مرورگر می‌تونن فضای قابل‌مشاهده رو تغییر بدن.

انتخاب واحد مناسب برای طراحی واکنش‌گرا

طراحی واکنش‌گرا یعنی صفحه توی موبایل، تبلت و نمایشگر بزرگ چیدمان مناسبی داشته باشه. برای این کار معمولاً یک واحد به‌تنهایی کافی نیست. می‌تونید عرض اصلی رو با درصد تعیین کنید، سقف اون رو با max-width ببندید و فاصله‌ها رو با rem تنظیم کنید.

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

کنترل بهتر اندازه با min-width، max-width، min-height و max-height

جلوگیری از بیش‌ازحد کوچک یا بزرگ شدن المان

خاصیت‌های min-width و max-width به‌ترتیب حداقل و حداکثر عرض رو مشخص می‌کنن. min-height و max-height هم همین کار رو برای ارتفاع انجام می‌دن. این محدودیت‌ها کمک می‌کنن المان توی اندازه‌های مختلف صفحه از کنترل خارج نشه.

برای یک بخش متنی معمولاً min-height از height ثابت انتخاب امن‌تریه. حداقل ارتفاع فضای اولیه رو فراهم می‌کنه، ولی اگه متن بیشتر بشه، جعبه هنوز می‌تونه رشد کنه.

یک الگوی ساده برای ساخت بخش واکنش‌گرا

.content-box {  box-sizing: border-box;  width: 90%;  max-width: 1200px;  min-height: 200px;  margin: 0 auto;  padding: 2rem;}

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

خاصیت display و نحوه نمایش المان‌ها

display چه چیزی رو در چیدمان صفحه تغییر می‌ده؟

خاصیت display تعیین می‌کنه یک المان چطور وارد چیدمان صفحه بشه و فرزندانش چطور کنار هم قرار بگیرن. مرورگر برای تگ‌های HTML مقدار پیش‌فرضی داره؛ مثلاً div معمولاً بلوکی و span معمولاً درون‌خطیه. شما می‌تونید این رفتار رو با CSS تغییر بدید.

اگه می‌خواید قبل از ادامه تگ‌های پایه رو مرور کنید، مقاله آموزش تگ‌های کاربردی HTML نقطه شروع خوبیه.

تفاوت نوع نمایش بیرونی و داخلی المان

نوع نمایش بیرونی می‌گه خود المان نسبت به المان‌های کناری چه رفتاری داره؛ مثلاً توی همون خط می‌مونه یا خط تازه‌ای می‌سازه. نوع نمایش داخلی مشخص می‌کنه فرزندان اون المان چطور چیده بشن؛ مثلاً با جریان عادی، Flex یا Grid.

لازم نیست فعلاً نحو چندکلمه‌ای display رو حفظ کنید. فقط یادتون باشه یک مقدار می‌تونه هم رفتار خود جعبه و هم شیوه چیدن محتوای داخل اون رو مشخص کنه.

مقدارهای اصلی خاصیت display

display: inline برای المان‌های درون خط

المان inline یا درون‌خطی بین متن قرار می‌گیره و معمولاً خط تازه‌ای نمی‌سازه. چند المان درون‌خطی تا وقتی فضا داشته باشن کنار هم نمایش داده می‌شن. تگ span نمونه رایج این حالته.

نکته مهم اینه که width و height روی یک المان درون‌خطی معمولی مثل span اثر عادی خودشون رو ندارن. فاصله و حاشیه عمودی اون هم با جعبه بلوکی فرق داره. اگه می‌خواید المان کنار متن بمونه و درعین‌حال عرض و ارتفاع بگیره، inline-block انتخاب مناسب‌تریه.

<p>این یک <span class="label">برچسب</span> داخل متن هست.</p>.label {  display: inline;  background: #fef3c7;}

display: block برای المان‌های بلوکی

یک المان block در جریان عادی از خط تازه شروع می‌شه و معمولاً فضای افقی در دسترسِ والد رو می‌گیره. پس قرار نیست همیشه کل عرض مرورگر رو اشغال کنه؛ اندازه اون به فضای دربرگیرنده‌اش بستگی داره.

اگه چند المان بلوکی معمولی داشته باشید، به‌صورت پیش‌فرض زیر هم دیده می‌شن. تگ‌های div، p و بیشتر عنوان‌ها نمونه‌های رایج هستن.

display: inline-block برای قرارگیری کنار هم و اندازه‌پذیری

inline-block ویژگی مفید دو حالت قبلی رو کنار هم می‌ذاره. المان می‌تونه کنار المان‌های دیگه قرار بگیره و درعین‌حال width و height بگیره. این مقدار برای برچسب‌ها، دکمه‌ها و آیتم‌های کوچک کاربرد داره.

.tag {  display: inline-block;  width: 120px;  padding: 8px;  background: #dbeafe;}

display: none برای حذف المان از صفحه

display: none المان و فرزندانش رو از چیدمان حذف می‌کنه. یعنی اون بخش دیده نمی‌شه و فضایی هم توی صفحه نگه نمی‌د. این محتوا معمولاً از درخت دسترس‌پذیری هم کنار می‌ره؛ درخت دسترس‌پذیری همون ساختاریه که ابزارهایی مثل صفحه‌خوان برای شناخت صفحه ازش استفاده می‌کنن.

پس برای پنهان کردن محتوایی که کاربر صفحه‌خوان هنوز باید به اون دسترسی داشته باشه، نباید بدون بررسی از display: none استفاده کنید.

visibility: hidden هم المان رو نامرئی می‌کنه، ولی معمولاً فضای اون رو توی چیدمان نگه می‌د. در مقابل، display: none خود جعبه و فضای اون رو حذف می‌کنه.

مقدارهای پرکاربرد display در چیدمان امروزی

display: flex و inline-flex

display: flex یک ظرف Flex می‌سازه. Flex روشی برای چیدن و تراز کردن چند آیتم در یک ردیف یا ستون هست. خود ظرف مثل یک المان بلوکی رفتار می‌کنه، ولی فرزندانش طبق قواعد Flex چیده می‌شن.

inline-flex هم فرزندان رو با Flex می‌چینه، ولی خود ظرف از بیرون رفتار درون‌خطی داره و می‌تونه کنار محتوای دیگه قرار بگیره.

.menu {  display: flex;  gap: 16px;  align-items: center;}

display: grid و inline-grid

display: grid یک ظرف Grid می‌سازه. Grid یا شبکه بهتون اجازه می‌ده محتوا رو توی ردیف و ستون بچینید. برای کارت‌های محصول، گالری و بخش‌هایی که ساختار دوبعدی دارن انتخاب خوبیه.

inline-grid از داخل Grid هست، ولی خود ظرف از بیرون رفتار درون‌خطی داره.

.cards {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 20px;}

display: flow-root

flow-root یک محیط چیدمان مستقل برای محتوای داخل المان می‌سازه. یکی از کاربردهای رایجش اینه که والد بتونه فرزندان شناور یا float رو درست در ارتفاع خودش حساب کنه. اگه هنوز با Float آشنا نیستید، آموزش خاصیت float در CSS رو بخونید.

.article-box {  display: flow-root;}

display: contents و نکته‌های استفاده از اون

display: contents باعث می‌شه جعبه خود المان توی چیدمان ساخته نشه، ولی فرزندانش همچنان نمایش داده بشن. انگار فرزندان برای چیدمان یک سطح بالاتر اومدن.

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

تفاوت inline، block و inline-block با یک مثال ساده

مقایسه رفتار این سه حالت در یک چیدمان یکسان

سه تگ span یکسان بسازید و فقط مقدار display اون‌ها رو عوض کنید. برای هر سه مورد عرض و ارتفاع هم می‌ذاریم تا تفاوت روشن بشه.

<span class="item inline-item">Inline</span><span class="item block-item">Block</span><span class="item inline-block-item">Inline Block</span>.item {  width: 160px;  height: 60px;  padding: 8px;  background: #bfdbfe;}.inline-item {  display: inline;}.block-item {  display: block;}.inline-block-item {  display: inline-block;}

• مورد inline داخل همون خط می‌مونه، ولی عرض و ارتفاع تعیین‌شده به شکل عادی روی اون اثر نمی‌ذارن.
• مورد block از خط تازه شروع می‌شه و عرض و ارتفاع رو می‌پذیره.
• مورد inline-block می‌تونه کنار محتوای دیگه بمونه و عرض و ارتفاع رو هم بپذیره.

برای هر موقعیت کدوم مقدار مناسب‌تره؟

برای بخشی کوتاه داخل متن مثل یک کلمه رنگی، inline مناسبه. برای بخش‌های اصلی صفحه که باید زیر هم قرار بگیرن، block انتخاب طبیعی‌تریه. برای دکمه یا برچسبی که باید کنار بقیه بمونه و اندازه مشخص داشته باشه، inline-block به کارتون میاد.

وقتی چند آیتم دارید و می‌خواید فاصله، تراز یا ترتیب اون‌ها رو راحت‌تر کنترل کنید، معمولاً Flex یا Grid انتخاب بهتریه.

اشتباه‌های رایج در width، height و display

• فرض اینکه درصد همیشه نسبت به پنجره مرورگره: درصد width معمولاً به عرض بلوک دربرگیرنده وابسته‌ست.
• استفاده از height درصدی بدون ارتفاع مشخص برای والد: اول بررسی کنید ارتفاع والد قابل محاسبه هست یا نه.
• انتظار اثر عادی width و height روی المان inline: برای اندازه‌پذیری درون خط معمولاً از inline-block استفاده کنید.
• استفاده از display: none فقط برای پنهان‌سازی ظاهری: یادتون نره که این مقدار المان رو از چیدمان و معمولاً از دسترس صفحه‌خوان هم کنار می‌ذاره.
• استفاده از اندازه‌های ثابت در همه عرض‌های صفحه: اندازه ثابت ممکنه توی موبایل باعث بیرون‌زدگی محتوا بشه. درصد، max-width و Media Query می‌تونن کمک کنن.
• فراموش کردن padding و border: اگه اندازه نهایی جعبه بیشتر از انتظار شد، مقدار box-sizing رو بررسی کنید.

تمرین جلسه نهم CSS

یک فایل HTML و یک فایل CSS بسازید و این چهار مرحله رو انجام بدید:

1. سه جعبه بسازید. عرض اولی رو 300px، دومی رو 50% و سومی رو 50vw بذارید.
2. سه تگ span بسازید و به‌ترتیب مقدارهای inline، block و inline-block رو روی اون‌ها امتحان کنید.
3. یک بخش با سه آیتم بسازید. یک بار والد رو display: flex و بار دیگه display: grid کنید.
4. عرض پنجره مرورگر رو کم و زیاد کنید و نتیجه هر واحد و نوع نمایش رو یادداشت کنید.

برای مرحله Grid می‌تونید از grid-template-columns: repeat(3, 1fr) استفاده کنید. مقدار 1fr یعنی یک سهم از فضای آزاد شبکه. برای Flex هم gap: 16px بذارید تا بین آیتم‌ها فاصله بیفته.

جمع‌بندی خاصیت‌های پرکاربرد CSS

توی این جلسه دیدید که width عرض و height ارتفاع المان رو کنترل می‌کنن، ولی نتیجه به واحد اندازه‌گیری، اندازه والد و مدل جعبه‌ای CSS هم بستگی داره. برای ساخت صفحه واکنش‌گرا بهتره اندازه‌های نسبی رو با محدودیت‌هایی مثل max-width ترکیب کنید.

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

سوالات متداول

تیم تولید محتوا

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