نحوه تنظیم محتوا ، بالشتک ، مرز و حاشیه یک عنصر HTML با CSS

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

پیش نیازها

برای پیروی از این آموزش ، حتماً پرونده ها و پوشه های لازم را طبق دستورالعمل قبلی در این سری تنظیم کرده اید که چگونه می توانید پروژه تمرین CSS و HTML را تنظیم کنید.

مدل جعبه CSS

یک عنصر HTML را می توان به عنوان یک سری از چهار جعبه همپوشانی درک کرد:

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

  ، وelements) unless you specify otherwise. When you set values for the width and height of an element, you are typically changing the width and height of the content box.

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

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

تنظیم اندازه محتوای یک عنصر HTML با CSS

ابتدا اطمینان حاصل کنید که پرونده ها و پوشه های لازم را طبق دستورالعمل قبلی در این سری تنظیم کرده اید که چگونه می توانید پروژه تمرین CSS و HTML را تنظیم کنید.

همه چیز را در پرونده styles. css خود پاک کنید (اگر پرونده حاوی محتوای آموزش های قبلی باشد) و قانون CSS زیر را به پرونده styles. css خود اضافه کنید:

پرونده Styles. css را ذخیره کنید. شما به تازگی یک کلاس را با استفاده از کلاس انتخابی زرد-غرق ایجاد کرده اید. هر عنصری که این کلاس را اختصاص دهید ، رنگ پس زمینه زرد خواهد داشت.

در مرحله بعد ، تمام محتوای موجود در پرونده index.html خود را پاک کنید (به جز خط اول کد:) و قطعه کد زیر را اضافه کنید:

فایل را ذخیره کرده و آن را در مرورگر بارگذاری کنید. شما باید نتایج زیر را دریافت کنید:

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

توجه: می توانید از ابزارهای توسعه دهنده وب Firefox برای مشاهده مدل جعبه یک عنصر HTML و مقادیر تعیین شده برای هر جعبه استفاده کنید. به مورد منوی Tools در نوار منوی بالا بروید و "وب توسعه دهنده/ابزارهای Toggle" را از منوی کشویی انتخاب کنید. ابزارهای توسعه دهنده باید در پایین پنجره خود ظاهر شوند. روی نماد پیکان در سمت چپ کیت ابزار کلیک کنیدمنو و سپس بر روی عنصری که می خواهید بازرسی کنید کلیک کنید. مدل جعبه عنصر انتخاب شده در سمت راست پایین صفحه پنجره Tools Developer نشان داده می شود. برای مشاهده آن ممکن است لازم باشد پنجره را گسترش دهید.

در مرحله بعد ، بیایید عرض ظرف را برای بررسی چگونگی تغییر این عنصر در مرورگر مشخص کنیم. خط برجسته زیر را به قانون CSS خود در پرونده Styles. css خود اضافه کنید تا عرض 500 پیکسل را تنظیم کنید:

فایل را ذخیره کرده و آن را در مرورگر خود بارگیری کنید. کانتینر شما اکنون باید 500 پیکسل عرض داشته باشد و ارتفاع آن به طور خودکار تنظیم شود تا محتوای متن در داخل قرار بگیرد:

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

نحوه تنظیم اندازه بالشتک یک عنصر HTML با CSS

در مرحله بعد ، اجازه می دهیم اندازه بالشتک را افزایش دهیم تا نحوه تغییر نمایش عنصر را بررسی کنیم. خط برجسته زیر را به قانون CSS خود در پرونده Styles. css خود اضافه کنید تا بالشتک روی 25 پیکسل تنظیم کنید:

پرونده styles. css را ذخیره کرده و پرونده index.html را در مرورگر خود بارگیری کنید. اندازه جعبه زرد باید گسترش یافته باشد تا 25 پیکسل از فضا بین محتوای متن و محیط جعبه امکان پذیر باشد:

با تنظیم اندازه مقدار بالشتک می توانید اندازه بالشتک را تغییر دهید. همچنین می توانید با استفاده از خواص زیر ، اندازه بالشتک قسمتهای خاص عنصر را تغییر دهید: بالشتک چپ ، بالشتک ، راست ، بالشتک ، بالا ، بالشتک. به عنوان مثال ، سعی کنید Padding اعلامیه را جایگزین کنید: 25px ؛در پرونده styles. css خود با قطعه برجسته در زیر:

پرونده styles. css را ذخیره کرده و پرونده index.html را در مرورگر خود بارگیری کنید. شما باید چیزی شبیه به این دریافت کنید:

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

تنظیم اندازه ، رنگ و سبک یک عنصر HTML با CSS

بیایید اکنون مقادیر تنظیم را برای مرز یک عنصر HTML تمرین کنیم. خاصیت مرزی به شما امکان می دهد اندازه ، رنگ و سبک (مانند جامد ، متراکم ، لکه دار ، زبانه و شروع) یک عنصر HTML را تنظیم کنید. این سه مقدار با اختصاص آنها به ویژگی مرزی تنظیم شده است:

سعی کنید اعلامیه برجسته زیر را اضافه کنید تا یک مرز سیاه جامد که پنج پیکسل عرض دارد اضافه کنید:

(ممکن است بخواهید اعلامیه های مختلف بالغ خود را از بخش آموزش قبلی پاک کنید و آنها را با یک بالشتک واحد جایگزین کنید: 25px ؛ اعلامیه برای کنترل قوانین). پرونده Styles. css را ذخیره کنید و index.html را در مرورگر خود بارگیری کنید تا تغییرات را بازرسی کنید. جعبه زرد شما اکنون باید با مقادیری که در قانون CSS تعیین کرده اید ، مرز داشته باشد:

می توانید مقادیر را تغییر دهید تا نحوه تغییر صفحه نمایش عنصر در مرورگر را تغییر دهید. مانند با بالشتک ، می توانید طرف مرزی را که می خواهید با ویژگی های مرزی راست ، مرز راست ، مرز ، مرز ، مرز و مرز تنظیم کنید ، مشخص کنید.

تنظیم اندازه حاشیه یک عنصر HTML با CSS

در مرحله بعد ، بیایید اندازه حاشیه یک عنصر را با CSS تنظیم کنیم. در این تمرین ، ما به حاشیه ها ارزش بسیار بزرگی خواهیم داد تا به راحتی می توان دید که چگونه اندازه حاشیه در مرورگر نمایش داده می شود. اعلامیه برجسته زیر را به پرونده خود در پرونده styles. css خود اضافه کنید تا حاشیه 100 پیکسل را تنظیم کنید:

پرونده Styles. css را ذخیره کنید و index.html را در مرورگر خود بارگیری کنید تا تغییرات را بازرسی کنید. جعبه زرد باید 100 پیکسل را به سمت پایین و 100 پیکسل به سمت راست منتقل کرده بود تا 100 پیکسل فضای حاشیه بین مرز و لبه های نمای را فراهم کند:

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

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

قبل از حرکت ، یک ظرف دیگر را به صفحه اضافه کنید تا بررسی کند که چگونه حاشیه بر موقعیت محتوای مجاور تأثیر می گذارد. بدون پاک کردن هر چیزی ، قوانین اضافی CSS را به پرونده Styles. css خود اضافه کنید:

پرونده را ذخیره کرده و به پرونده index.html خود برگردید. بدون پاک کردن هر چیزی ، عنصر زیر را به پرونده خود اضافه کرده و کلاس Div Blue را به آن اختصاص دهید:

پرونده index.html خود را ذخیره کرده و آن را در مرورگر بارگیری کنید. شما باید چیزی شبیه به این دریافت کنید:

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

نتیجه

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

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

سری آموزش: نحوه ساخت وب سایت با CSS

این آموزش بخشی از یک سری در مورد ایجاد و سفارشی کردن این وب سایت با CSS است ، یک زبان شیوه ای که برای کنترل ارائه وب سایت ها استفاده می شود. شما ممکن است کل سری را برای بازآفرینی وب سایت تظاهرات و آشنایی با CSS دنبال کنید یا از روشهای توصیف شده در اینجا برای سایر پروژه های وب سایت CSS استفاده کنید.

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