مدل جعبه ای (Box Model) در CSS — آموزش CSS (بخش یازدهم)

۸۸۴ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۱۲ دقیقه
مدل جعبه ای (Box Model) در CSS — آموزش CSS (بخش یازدهم)

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

باکس‌های بلوکی و درون‌خطی

در CSS عموماً دو نوع باکس داریم که یکی «باکس‌های بلوکی» (block boxes) و دیگری «باکس‌های درون‌خطی» (inline boxes) هستند. این مشخصه‌ها به شیوه رفتار باکس برحسب گردش صفحه و در ارتباط با دیگر باکس‌های موجود روی صفحه اشاره می‌کنند.

اگر یک باکس به صورت بلوکی تعریف شده باشد به روش‌های زیر رفتار می‌کند:

  • باکس در جهت درون‌خطی گسترش می‌یابد تا فضای موجود در کانتینر را اشغال کند. در اغلب موارد این به آن معنی است که باکس به اندازه کانتینر توسعه می‌یابد و 100% فضای موجود را اشغال می‌کند.
  • باکس به یک خط جدید می‌شکند.
  • مشخصه‌های width و height مورد ملاحظه قرار می‌گیرند.
  • «فاصله‌گذاری» (Padding)، «حاشیه‌بندی» (margin)، و «لبه» (border) موجب می‌شود که عناصر دیگر از کادر فاصله بگیرند.

به جز در مواردی که بخواهیم نوع را به صورت درون‌خطی یعنی inline نمایش دهیم، عناصری مانند «عنوان» (Heading) مانند <h1> و <p> به صورت پیش‌فرض همگی از نوع نمایش خارجی block استفاده می‌کنند.

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

  • باکس به خط جدیدی نمی‌شکند.
  • مشخصه‌های width و height اعمال نمی‌شوند.
  • فاصله‌گذاری، حاشیه‌بندی و لبه اعمال می‌شوند اما موجب دورتر شدن باکس‌های درون‌خطی دیگر از این باکس نمی‌شوند.

عنصر <a> که برای لینک‌ها استفاده می‌شود و <span> ،<em> و <strong> همگی نمونه‌هایی از عناصری هستند که به صورت پیش‌فرض به طور درون‌خطی نمایش می‌یابند.

نوع باکسی که روی یک عنصر اعمال می‌شود از طریق مشخصه display به صورت block یا inline تعریف می‌شود و با مقدار outer در display نیز مرتبط است.

انواع نمایش داخلی و خارجی

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

باکس‌ها داری نوع نمایش داخلی هستند که شیوه قرارگیری عناصر درون آن باکس را تعیین می‌کند به صورت پیش‌فرض عناصر درون باکس به صورت normal flow قرار می‌گیرند. معنی آن این است که دقیقاً مانند هر عنصر درون‌خطی و بلوکی دیگر (که در بخش قبل توضیح دادیم) رفتار می‌کنند.

با این حال، می‌توانیم نوع نمایش داخلی را با استفاده از مقادیر display مانند flex تغییر دهیم. اگر از مقدار display: flex;‎‎ روی یک عنصر استفاده کنیم، نوع نمایش خارجی به صورت block خواهد بود، اما نوع نمایش داخلی به flex تغییر می‌یابد. در این حالت همه فرزندان مستقیم این باکس به صورت آیتم‌های flex درمی‌آیند که بر اساس قواعد تعیین‌شده در مشخصات Felxbox (+) که در ادامه بیشتر در موردش صحبت می‌کنیم، طرح‌بندی می‌شوند.

نکته: برای مطالعه بیشتر در مورد مقادیر display و شیوه قرارگیری کادرهای درون‌خطی و بلوکی، می‌توانید به این صفحه راهنمای MDN (+) مراجعه کنید.

زمانی که می‌خواهید در مورد لی‌آوت CSS بیشتر مطالعه کنید، با flex و انواع مختلف مقادیری که باکس‌ها می‌توانند داشته باشند، مانند grid مواجه خواهید شد. با این حال لی‌آوت درون‌خطی و بلوکی روش پیش‌فرضی است که عناصر روی صفحه وب می‌گیرند و چنان که پیش‌تر گفتیم، گاهی اوقات به نام «گردش نرمال» (Normal Flow) مورد اشاره قرار می‌گیرند، زیرا در صورت عدم استفاده از دستورالعمل خاص، باکس‌ها یا به صورت درون‌خطی و یا بلوکی قرار می‌گیرند.

نمونه‌هایی از انواع مختلف نمایش

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

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

در زیر آن یک پاراگراف سطح بلوکی داریم که درون آن دو عنصر <span> وجود دارند. این عناصر به طور معمول inline هستند اما یکی از عناصر، کلاس بلوکی دارد و به صورت display: block تعیین شده است.

مدل جعبه ای (box model) در CSS
1p, 
2ul {
3  border: 2px solid rebeccapurple;
4  padding: .5em;
5}
6
7.block,
8li {
9  border: 2px solid blue;
10  padding: .5em;
11}
12
13ul {
14  display: flex;
15  list-style: none;
16}
17
18.block {
19  display: block;
20}      
1<p>I am a paragraph. A short one.</p>
2<ul>
3  <li>Item One</li>
4  <li>Item Two</li>
5  <li>Item Three</li>
6</ul>
7<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>

بدین ترتیب می‌توانیم ببینیم که عناصر inline در مثال بعدی چگونه رفتار می کنند. عنصر <span> در پاراگراف نخست به طور پیش‌فرض درون‌خطی است و از این رو موجب شکستگی خط نمی‌شود.

همچنین یک عنصر <ul> داریم که به صورت display: inline-flex تعیین شده و یک باکس درون‌خطی پیرامون برخی آیتم‌های flex ایجاد می‌کند.

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

مدل جعبه ای (box model) در CSS
1p, 
2ul {
3  border: 2px solid rebeccapurple;
4}
5
6span,
7li {
8  border: 2px solid blue;
9}
10
11ul {
12  display: inline-flex;
13  list-style: none;
14  padding: 0;
15} 
16
17.inline {
18  display: inline;
19}
1<p>
2    I am a paragraph. Some of the
3    <span>words</span> have been wrapped in a
4    <span>span element</span>.
5</p>     
6<ul>
7  <li>Item One</li>
8  <li>Item Two</li>
9  <li>Item Three</li>
10</ul>
11<p class="inline">I am a paragraph. A short one.</p>
12<p class="inline">I am another paragraph. Also a short one.</p>

در ادامه این سری مطالب با مواردی مانند لی‌آوت flex بیشتر سر و کار خواهیم داشت. نکته کلیدی که باید به خاطر بسپارید، این است که تغییر دادن مقدار مشخصه display می‌تواند نوع نمایش خارجی باکس را از بلوکی به درون‌خطی یا برعکس تغییر دهد و به این ترتیب شیوه نمایش آن را در کنار عناصر دیگر در لی‌آوت تغییر می‌دهد. در ادامه این راهنما بر روی انواع نمایشی دیگر متمرکز خواهیم شد.

مدل جعبه‌ای (Box Model) CSS چیست؟

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

بخش‌های یک باکس

برای ساختن یک باکس بلوکی در CSS موارد زیر را در اختیار داریم:

  • باکس محتوا (Content box): ناحیه‌ای که محتوا نمایش می‌یابد که می‌تواند با استفاده از مشخصه‌هایی مانند width و height اندازه‌بندی شود.
  • باکس فاصله‌گذاری (Padding box): بخش فاصله‌گذاری پیرامون محتوا است که به صورت فضای تمیزی قرار می‌گیرد. اندازه آن را می‌توان با استفاده از Padding و مشخصه‌های مرتبط تعیین کرد.
  • باکس لبه (Border box): باکس لبه پیرامون محتوا و فاصله‌گذاری را احاطه می‌کند. اندازه و استایل آن را می‌توان با استفاده از border و مشخصه‌های مرتبط کنترل کرد.
  • باکس حاشیه (Margin box): حاشیه به بیرونی‌ترین لایه مدل جعبه‌ای گفته می‌شود که پیرامون محتوا، فاصله‌گذاری و لبه را به صورت فضای سفیدی احاطه می‌کند و بین این باکس و دیگر عناصر قرار می‌گیرد. اندازه آن را می‌توان با استفاده از مشخصه margin. دیگر مشخصه‌های مرتبط کنترل کرد.
مدل جعبه ای (box model) در CSS

مدل جعبه‌ای استاندارد

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

اگر فرض کنیم که باکس دارای CSS زیر است که خصوصیت‌های width, height, margin, border و padding را تعریف می‌کند:

1.box {
2  width: 350px;
3  height: 150px;
4  margin: 10px;
5  padding: 25px;
6  border: 5px solid black;
7}

فضای اشغال‌شده از سوی باکس با استفاده از مدل باکس استاندارد دقیقاً برابر با 410 پیکسل یعنی مجموع 350 + 25 + 25 + 5 + 5 و ارتفاع آن برابر با 210 پیکسل یعنی مجموع 150 + 25 + 25 + 5 + 5 خواهد بود، چون فاصله‌گذاری و لبه (border) به عرض مورد استفاده از سوی باکس محتوا اضافه می‌شوند.

مدل جعبه ای (box model) در CSS

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

مدل باکس جایگزین CSS

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

مدل جعبه ای (box model) در CSS

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

1.box { 
2  box-sizing: border-box; 
3}

اگر می‌خواهید همه عناصر از مدل جعبه‌ای جایگزین استفاده کنند، که گزینه رایجی در بین توسعه‌دهندگان است، می‌توانید مشخصه box-sizing را روی عنصر <html> تعیین کنید تا پس از آن همه عناصر دیگر نیز آن مقدار را به ارث ببرند. این وضعیت در قطعه کد زیر دیده می‌شود.

1html {
2  box-sizing: border-box;
3}
4*, *::before, *::after {
5  box-sizing: inherit;
6}

نکته: اینترنت اکسپلورر به طور پیش‌فرض از مدل جعبه‌ای جایگزین استفاده می‌کند و هیچ روشی نیز برای سوئیچ کردن به مدل استاندارد تعبیه نشده است.

کار با مدل‌های جعبه‌ای

در مثال زیر می‌توانید دو باکس را ببینید. هر دو دارای کلاس box. هستند که مشخصه‌های width, height, margin, border و padding یکسانی به آن‌ها می‌دهد. تنها تفاوت این است که باکس دوم طوری تعیین شده که از مدل جعبه‌ای جایگزین استفاده کند.

مدل جعبه ای (box model) در CSS
1.box {
2  border: 5px solid rebeccapurple;
3  background-color: lightgray;
4  padding: 40px;
5  margin: 40px;
6  width: 300px;
7  height: 150px;
8}
9
10.alternate {
11  box-sizing: border-box;
12}
1<div class="box">I use the standard box model.</div>
2<div class="box alternate">I use the alternate box model.</div>

استفاده از DevTools مرورگر برای نمایش مدل جعبه‌ای

بخش ابزارهای توسعه‌دهندگان (developer tools) در مرورگر موجب می‌شود که درک مدل جعبه‌ای تا حد زیادی آسان‌تر شود. برای نمونه اگر یک عنصر را در بخش DevTools فایرفاکس بررسی کنید، می‌توانید اندازه عنصر به علاوه حاشیه، فاصله‌گذاری و لبه‌اش را ببینید. بازبینی یک عنصر به این طریق برای یافتن اندازه‌اش روشی عالی برای تعیین دقیق ابعاد آن محسوب می‌شود.

مدل جعبه ای (box model) در CSS

حاشیه‌ها، فاصله‌گذاری و لبه‌ها

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

حاشیه

«حاشیه» (Margin) به فضای نامریی پیرامون باکس گفته می‌شود. حاشیه موجب می‌شود که عناصر دیگر از باکس فاصله بگیرند. حاشیه‌ها می‌توانند مقادیر مثبت یا منفی داشته باشند. تعیین مقدار منفی برای حاشیه روی یک ضلع باکس موجب می‌شود که عناصر دیگر روی صفحه روی آن بیفتند. جه از مدل جعبه‌ای استاندارد و چه از مدل جعبه‌ای جایگزین استفاده کنید، حاشیه همواره پس از این که اندازه باکس قابل مشاهده محاسبه شد، اضافه می‌شود.

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

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
مدل جعبه ای (box model) در CSS
1.box {
2  margin-top: -40px;
3  margin-right: 30px;
4  margin-bottom: 40px;
5  margin-left: 4em;
6}
1<div class="container">
2  <div class="box">Change my margin.</div>
3</div>

تصادم حاشیه‌ها

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

در مثال زیر دو پاراگراف داریم، پاراگراف فوقانی دارای margin-bottom به اندازه 50 پیکسل است و پاراگراف دوم نیز دارای مشخصه margin-top به میزان 30 پیکسل است. این حاشیه‌ها با هم تصادم دارند و از این رو عملاً حاشیه‌ای بین دو باکس به میزان 50 پیکسل ایجاد می‌شود که برابر با مجموع دو حاشیه نیست.

مدل جعبه ای (box model) در CSS
1.one {
2  margin-bottom: 50px;
3}
4
5.two {
6  margin-top: 30px;
7}
1<div class="container">
2  <p class="one">I am paragraph one.</p>
3  <p class="two">I am paragraph two.</p>
4</div>

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

لبه‌ها

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

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

  • border-top
  • border-right
  • border-bottom
  • border-left

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

  • border-width
  • border-style
  • border-color

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

  • border-top-width
  • border-top-style
  • border-top-color
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left-width
  • border-left-style
  • border-left-color
مدل جعبه ای (box model) در CSS
1.container {
2  border-top: 5px dotted green;
3  border-right: 1px solid black;
4  border-bottom: 20px double rgb(23,45,145);
5}
6
7.box {
8  border: 1px solid #333333;
9  border-top-style: dotted;
10  border-right-width: 20px;
11  border-bottom-color: hotpink;
12}
1<div class="container">
2  <div class="box">Change my borders.</div>
3</div>

فاصله‌گذاری

«فاصله‌گذاری» (Padding) بین لبه و ناحیه محتوا قرار می‌گیرد. برخلاف حاشیه‌ها نمی‌توان برای فاصله‌گذاری مقدار منفی تعیین کرد. بنابراین باید مقدار 0 یا مثبت وارد کنید. هر پس‌زمینه‌ای که روی عنصر اعمال شود، عنصر در پشت فاصله‌گذاری نمایش خواهد یافت و معمولاً برای کنار زدن محتوا از لبه استفاده می‌شود.

می‌توانیم فاصله‌گذاری هر ضلع یک عنصر با به صورت تک به تک با استفاده از مشخصه padding تعیین کنیم و یا این که هر کدام را به صورت منفرد با استفاده از مشخصه‌های بلند به صورت زیر تنظیم کنیم:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
مدل جعبه ای (box model) در CSS
1.box {
2  padding-top: 0;
3  padding-right: 30px;
4  padding-bottom: 40px;
5  padding-left: 4em;
6}
7
8.container {
9  padding: 20px;
10}
1<div class="container">
2  <div class="box">Change my padding.</div>
3</div>

مدل باکس و باکس‌های درون‌خطی

تمام مواردی که تا به اینجا مطرح شد، مربوط به باکس‌های بلوکی بود. البته برخی از این مشخصه‌ها را می‌توان در مورد بلوک‌های درون‌خطی نیز اعمال کرد. برای نمونه موارد مربوط به عنصر <span> چنین هستند.

در مثال زیر یک <span> درون یک پاراگراف داریم که مشخصه‌های width, height, margin, border و padding روی آن اعمال شده‌اند. چنان که می‌بینید عرض و ارتفاع نادیده گرفته شده‌اند. لبه، فاصله‌گذاری و حاشیه مورد توجه قرارگرفته‌اند، اما رابطه محتواهای دیگر با باکس درون‌خطی ما را تحت تأثیر قرار نمی‌دهند و لذا فاصله‌گذاری و لبه با کلمات دیگر در پاراگراف همپوشانی دارند.

مدل جعبه ای (box model) در CSS
1span {
2  margin: 20px;
3  padding: 20px;
4  width: 80px;
5  height: 50px;
6  background-color: lightblue;
7  border: 2px solid blue;
8}
1<p>
2    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
3</p>

استفاده از خصوصیت نمایشی inline-block

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

عنصری با خصوصیت display: inline-block زیرمجموعه‌ای از خصوصیات بلوکی که قبلاً دیدیم را ارائه می‌کند:

  • مشخصه‌های width و height مورد توجه قرار می‌گیرند.
  • padding, margin و border موجب می‌شوند که عناصر دیگر از باکس دور شوند.

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

مدل جعبه ای (box model) در CSS
1span {
2  margin: 20px;
3  padding: 20px;
4  width: 80px;
5  height: 50px;
6  background-color: lightblue;
7  border: 2px solid blue;
8  display: inline-block;
9}
1<p>
2    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
3</p>

مواردی که این خصوصیت می‌تواند مفید باشد، زمان‌هایی است که برای یک لینک ناحیه کلیکی بزرگ‌تر از متن مربوطه تعیین می‌کنیم. <a> یک عنصر درون‌خطی مانند <span> است. شما می‌توانید از display: inline-block برای تعیین فاصله‌گذاری روی آن استفاده کنید و بدین ترتیب کاربر راحت‌تر می‌تواند روی آن کلیک کند.

این وضعیت در نوارهای ناوبری به طور مکرر دیده می‌شود. ناوبری زیر در یک ردیف با استفاده از flexbox نمایش می‌یابد و ما فاصله‌گذاری را به عنصر <a> اضافه کرده‌ایم، زیرا می‌خواهیم وقتی ماوس روی <a> می‌رود، بتوانیم background-color را تغییر دهیم. فاصله‌گذاری به ظاهر با لبه روی عنصر <ul> همپوشانی می‌یابد. دلیل این امر آن است که <a> یک عنصر درون‌خطی است.

مدل جعبه ای (box model) در CSS
1.links-list a {
2  background-color: rgb(179,57,81);
3  color: #fff;https://mdn.github.io/css-examples/learn/box-model/inline-block-nav.html
4  text-decoration: none;
5  padding: 1em 2em;
6}
7
8.links-list a:hover {
9  background-color: rgb(66, 28, 40);
10  color: #fff;
11}
1<nav>
2  <ul class="links-list">
3    <li><a href="">Link one</a></li>
4    <li><a href="">Link two</a></li>
5    <li><a href="">Link three</a></li>
6  </ul>
7</nav>

سخن پایانی

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

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *