گاهی اوقات لازم است یک بلوک بزرگ از یک سند که نه تنها شامل متن، بلکه شکل ها، جداول و غیره باشد، تراز کنید. برای این منظور از یک عنصر ظرف استفاده می شود. DIV. مشخصات عنصر DIV:
ALIGN="alignment">
ویژگی ALIGN نوع تراز محتوا را مشخص می کند و می تواند مقادیر مشابه عنصر P را داشته باشد.
تورفتگی
گاهی اوقات می خواهید بلوکی از متن تورفتگی را نمایش دهید. برای انجام این کار، یک بلوک متن در یک عنصر ظرف قرار می گیرد. مسابقه. سپس محتوای این عنصر با تورفتگی های کوچک در سمت چپ و راست نمایش داده می شود و همچنین با خطوط خالی از بقیه متن جدا می شود.
جداول
جداول یکی از قدرتمندترین و پرکاربردترین ابزارها در HTML هستند. آنها نه تنها به طور سنتی به عنوان روشی برای ارائه داده ها، بلکه به عنوان ابزاری برای قالب بندی صفحات وب نیز استفاده می شوند. یک سند HTML می تواند شامل تعداد دلخواه جداول باشد و جداول می توانند درون یکدیگر قرار گیرند.
هر جدول با یک برچسب شروع می شود<جدول> و با تگ به پایان می رسدجدول> داخل این جفت تگ توضیحاتی از محتویات جدول وجود دارد. هر جدولی از یک یا چند ردیف تشکیل شده است که حاوی داده هایی برای سلول های جداگانه است.
هر خط با یک برچسب شروع می شود<TR> و با تگ به پایان می رسدTR> یک سلول در یک ردیف توسط یک جفت تگ قاب می شود<TD> وTD> یا<TH> وTH> برچسب بزنید
برچسب ها
مثال جدول:
این مثال در مرورگر به صورت زیر نمایش داده می شود:
مشخصات برچسب
ALIGN = تراز کردن BGCOLOR = رنگ پس زمینه COLSPAN = تعداد سلول ها HEIGHT = ارتفاع سلول ROWSPAN = تعداد سلول ها VALIGN = تراز عمودی WIDTH = عرض سلول ویژگی ALIGN تراز محتویات سلول را مشخص می کند. می تواند یکی از سه مقدار را داشته باشد: LEFT (چپ)، RIGHT (راست) و CENTER (مرکز). پیش فرض CENTER است. ویژگی BGCOLOR رنگ پس زمینه سلول را مشخص می کند. مقدار آن را می توان در نماد نمادین یا در قالب RGB مشخص کرد. ویژگی COLSPAN به شما امکان می دهد چندین سلول مجاور را به صورت افقی ادغام کنید. مقدار این ویژگی تعداد سلول هایی است که باید ادغام شوند. ویژگی HEIGHT ارتفاع سلول را بر حسب پیکسل مشخص می کند. ویژگی ROWSPAN به شما امکان می دهد چندین سلول مجاور را به صورت عمودی ادغام کنید. مقدار این ویژگی تعداد سلول هایی است که باید ادغام شوند. ویژگی VALIGN تراز عمودی محتوای سلول را تعیین می کند. این می تواند مقادیر زیر را داشته باشد: TOP (بالا)، MIDDLE (وسط) و BOTTOM (پایین). پیش فرض MIDDLE است. ویژگی WIDTH عرض سلول را بر حسب پیکسل مشخص می کند.
سوالاتی برای تجمیع 4. مشق شب: 1. جدولی بسازید که یک خانه در ردیف اول، دو خانه در دوم و سه خانه در ردیف سوم داشته باشد. 2. در عمل، تأثیر استفاده از مقادیر مختلف ویژگی ALIGN تگ را مشاهده کنید 7 پاسخ HTML در ابتدا برای قرار دادن محتوای اسناد در ساختاری ایجاد شد که رایانه ها بتوانند آن را درک کنند. با در نظر گرفتن این موضوع، تگ p باید حاوی هر چیزی باشد که اگر محتوای صفحه به یک سند چاپی تبدیل شود، به عنوان یک پاراگراف ساختار می یابد. عناصر div و span به عنوان کانتینرهایی با هدف عمومی ذخیره می شوند تا تشکیل و گروه بندی عناصر مرتبط را تسهیل کنند تا سطوح بیشتری از ساختار را فراهم کنند، شاید با صفحات یک سند متنی مرتبط باشند. در برخی موارد، تگ‌های p باید حاوی عناصر دیگری مانند لنگر (a)، تصویر (img) و سایر عناصر درون خطی باشند، زیرا آنها مستقیماً با بقیه محتوا مرتبط هستند و منطقی است که آنها را به این ترتیب گروه بندی کنیم یا متن بقیه پاراگراف شامل توضیحات بیشتر است. با این حال، اگر هیچ توضیح اضافی در مورد این عناصر وجود نداشته باشد، بی معنی است که آنها را فقط به عنوان یک ظرف مناسب در یک پاراگراف قرار دهید. یک div مناسب تر خواهد بود. به طور کلی، یک پاراگراف باید شامل یک پاراگراف متن و هر عنصر مستقیما مرتبط یا توصیف شده باشد. هیچ چیز دیگری در پاراگراف معنی ندارد. به روز رسانی: HTML5 همچنین تعدادی دیگر از عناصر "محفظه" معنایی، از جمله مقاله، ناوبری، سربرگ، بخش، و غیره را اضافه می کند.
تفاوت بین این سه برچسب (و بسیاری دیگر) در معنای معنایی آنهاست. استاندارد HTML شامل هر دو تگ با معانی خاص ( برای پاراگراف ها برای متن انتخاب شده و غیره) و برچسب های بدون معنی. دومی هستند و ، که برای شناسایی محتوای بلوکی یا درون خطی استفاده می شود که باید شناسایی شود (با استفاده از ویژگی class= یا id=) اما یک برچسب معنایی خاص برای آن وجود ندارد. مثلا می توانید بنویسید سلام اسم من جان دو. - نشان می دهد که یک پاراگراف است (که مرورگر قبلاً تصوری از نحوه رسیدگی به آن دارد) و بخشی از محتوای آن یک نام است (به معنای کاملاً هیچ چی). مرورگر اگر CSS یا جاوا اسکریپت از آن استفاده نمی کند).بنابراین، این تگ ها هم برای افزودن اطلاعات اضافی به یک سند HTML که در تگ های معنایی ارائه شده توسط استاندارد (برای مثال عالی به مشخصات hCard مراجعه کنید) و هم برای اعمال تصویری (CSS) یا کاربردی (کاربردی) بسیار مفید هستند. جاوا اسکریپت) ساختار سند را بدون تغییر معنایی آن.
این یک عنصر در سطح بلوک است که باید شامل یک پاراگراف متشکل از متن باشد، عناصر درون خطی که آن متن را تغییر می‌دهند ( یک عنصر در سطح بلوک است که برای تقسیم یک صفحه استفاده می شود، تقریبا همیشه در ترکیب با سبک های CSS.
خوب، راستش من از این برچسب اغلب استفاده نمی کنم. این یک عنصر درون خطی است و من معمولاً زمانی از آن استفاده می‌کنم که می‌خواهم سبک‌هایی را در متنی اعمال کنم که از استفاده از چیزهای معنی‌دارتر مانند برچسب‌ها سودی نمی‌برد. و .
من فکر می کنم سازنده های صفحه باید از نشانه گذاری معنایی استفاده کنند، به این معنی که نشانه گذاری که ایجاد می کنند باید معنی را منتقل کند (نه ارائه). و آنها معانی مختلفی دارند. اولی برای تعریف یک بخش (یا بخش) از یک صفحه HTML و دومی برای تعریف یک پاراگراف از متن استفاده می شود.
تماشا کردن برایم سخت بود و (X) تگ های HTML مشخص می کنند که چه متنی را احاطه کرده اند. این یک آدرس است، این یک لینک، این یک پاراگراف و غیره است... این چیزی است که آنها به نظر من قادر به انجام آن هستند. من علاقه مند به شنیدن بیشتر یا حتی اصلاحات در مورد آنچه در اینجا نوشتم هستم.
عنصر p نشان دهنده یک پاراگراف است. بیا مشغول شویم ظرفطراحی وب سایت- عناصر صفحات اینترنتی - ظروف بلوک را مطالعه خواهیم کرد. بیایید ویژگی های سبک اضافی مورد استفاده برای تنظیم پارامترهای کانتینرهای بلوک (اندازه و مکان آنها در صفحه وب) را بیاموزیم. در نهایت، کنترل‌های سرریز را از CSS دریافت می‌کنیم. یک محفظه بلوک می تواند از یک تا چندین عنصر بلوک مانند عنوان، پاراگراف، جدول و غیره باشد. برای ایجاد ظرف بلوکی
این محفظه بلوک شامل یک عنوان و دو پاراگراف است. اینجا یک جدول است. این یک ویدیو و یک پاراگراف است. ما همچنین یک سبک درون خطی اضافه کردیم که متن را در مرکز تراز می کند. ویدئو نیز در مرکز قرار خواهد گرفت. کانتینرهای بلوکی بیشتر از کانتینرهای درون خطی استفاده می شوند. نه چندان دور، برنامه نویسان وب متن طراحی وب کانتینر- یک سند متنی معمولی: پاراگراف ها، سرفصل ها، نقل قول های بزرگ، متن با فرمت ثابت و جداول. مزیت اصلی آن یک کد html ساده است. معایب: ظاهر کسل کننده صفحه وب، نبود وسیله ای برای قرار دادن عناصر یک صفحه وب به چهار بخش تقسیم می شود: عنوان، نوار پیمایش، محتوای اصلی، اطلاعات نویسنده. تمام صفحات سایت یکسان است به نظر می رسد که کد HTML هر صفحه وب تقریباً یکسان است (به جز محتوای اصلی) و هر صفحه همان قسمت کد را بارگذاری می کند. و هر چه فایل بزرگتر باشد، زمان بیشتری برای بارگذاری طول می کشد (کاربر بیشتر منتظر می ماند). با این کار کل کد html بارگیری نمی شود، بلکه فقط یک قسمت - محتوای اصلی بارگیری می شود. مشکل اینجاست طراحی وب کانتینر قاب صفحه سایت - مجموعه قاب برخی از بخش‌های محتوا در صفحات وب جداگانه نمایش داده می‌شوند که آدرس‌های آنها در پارامترهای فریم آنها تعیین شده است. صفحات دیگر فقط حاوی مطالب اصلی بودند. مزایای طراحی وب کانتینر قاب دار- بهبود سرعت بارگذاری صفحه اما معایبی نیز وجود دارد: فریم ها نیستنداستاندارد شده اند و هیچ راهی برای تغییر ساختار آنها وجود ندارد. بعداً نوع جدیدی از طراحی وب ظاهر شد- جدولی جدولی طراحی وب کانتینر. هنگام ایجاد یک صفحه وب، از جدول استفاده می شود. عنوان، کپی رایت، نوار پیمایش در سلول های جداگانه این جدول قرار داده شده است. در آینده طراحی وب جدولی نسبت به طراحی وب فریم محبوبیت بیشتری پیدا کرد. مزایای: امکان نمایش صفحات وب به صورت یکسان در تمامی مرورگرهای وب. قالب بندی جداول و سلول های آنها با سبک های CSS. -
صفحات وب پیچیده - قرار دادن قطعات مختلف محتوا، افزایش تعداد ستون های متن. ایرادات: همه صفحات دوباره دارای قسمت های تکراری کد html بودند که در کاهش بار صفحه منعکس شد. کد html بزرگ و پیچیده پس بیایید به سراغ یادگیری نوع جدیدی از طراحی وب برویم. از کانتینرهای بلوکی که در ابتدای این فصل معرفی کردیم، برای میزبانی تک تک محتوای صفحه وب استفاده می کند. ظروف جداگانه برای سربرگ وب سایت، نوار پیمایش، محتوای اصلی و اطلاعات حق چاپ ایجاد می شود. اگر محتوای اصلی ساختار پیچیده ای داشته باشد و از قسمت های مستقل زیادی تشکیل شده باشد، برای هر کدام یک ظرف جداگانه ایجاد می شود. ویژگی های خاص سبک CSS برای تنظیم گزینه های مختلف برای کانتینرهای بلوک ارائه شده است. این پارامترها شامل ابعاد (عرض و ارتفاع)، محل قرارگیری ظروف و رفتار سرریز آنها می باشد. همچنین می‌توانیم یک رنگ پس‌زمینه برای ظروف تنظیم کنیم، و برای برجسته‌تر کردن آنها، بالشتک‌ها و حاشیه‌هایی ایجاد کنیم (گزینه‌های بالشتک و حاشیه در فصل 11 مورد بحث قرار خواهند گرفت). و چی، طراحی وب کانتینرخیلی خوب؟ بیایید نگاهی به کاستی های سه اصل قدیمی طراحی وب بیندازیم و ببینیم آیا او می تواند آنها را برطرف کند یا خیر. ظاهر بی تکلف و ارائه خطی صفحات وب در طراحی وب متنی است. ما می توانیم ظروف را در یک صفحه وب تقریباً در هر جایی مرتب کنیم و محتوای دلخواه را در آنها قرار دهیم: متن، جداول، تصاویر، صدا و ویدئو و حتی سایر ظروف. و CSS به ما این امکان را می دهد که تقریباً هر گونه نمایشی را برای آنها تنظیم کنیم. - صفحات وب "یکپارچه" - در طراحی وب متنی و جدولی. مرورگرهای وب مدرن به شما این امکان را می دهند که یک صفحه وب ذخیره شده در یک فایل جداگانه را با استفاده از رفتار ایجاد شده ویژه در یک ظرف بارگذاری کنید، یعنی محتوای بارگذاری شده را سازماندهی کنید. در فصل 18 به این موضوع خواهیم پرداخت. - قاب های "غیر استاندارد" - در قاب طراحی وب. کانتینرها و برچسب های مرتبط به طور رسمی توسط W3C استاندارد شده اند و همه مرورگرهای وب با آنها یکسان رفتار می کنند. دست و پا گیر بودن کد HTML در طراحی وب جدولی است. کد HTML که کانتینرها را تشکیل می دهد بسیار فشرده است. همانطور که می دانیم، یک محفظه بلوکی تنها با یک جفت تگ تشکیل می شود. بارگذاری آهسته صفحات وب - در طراحی وب جدولی. همه مرورگرهای وب محتویات کانتینرها را هنگام بارگیری نمایش می دهند، بنابراین صفحات وب به صورت بصری بسیار سریع بارگیری می شوند. و چه، طراحی وب کانتینر خیلی خوب است؟ و اصلا عیب نداره؟ افسوس که هیچ چیز در دنیا کامل نیست... توانایی اجرای طراحی پیچیده صفحات وب را به جدولی از دست می دهد. یک جدول به شما امکان می دهد چندین ستون با عرض های مختلف در یک صفحه وب ایجاد کنید که حاوی محتوای متفاوت است. برای انجام این کار با کانتینرها، احتمالاً باید از کانتینرهای تو در تو، استایل پیچیده و احتمالاً رفتاری استفاده کنید که کانتینرها را پس از بارگیری صفحه وب در مکان های مناسب قرار می دهد. این شاید تنها نقطه ضعف طراحی وب کانتینری باشد. خوب، طراحی وب کانتینر عمدتاً واضح است. بیایید تمرین کنیم. بیایید صفحات وب خود را با استفاده از طراحی وب کانتینری طراحی مجدد کنیم - سبک، ساده، مدرن. ابتدا، بیایید یک طرح بندی در صفحات وب کانتینرهای مناسب ایجاد کنیم. بهتر است آن را روی کاغذ یا در یک برنامه ویرایشگر گرافیک بکشید. طرح کلاسیکظرفطراحی وب سایت(و نه تنها ظرف) در شکل نشان داده شده است. 10.1. همانطور که می بینید، در بالای صفحه عنوان وب سایت، در زیر آن، نوار پیمایش و محتوای اصلی به صورت افقی در یک خط قرار گرفته اند و اطلاعات کپی رایت در زیر آنها ضمیمه شده است. بیایید از این طرح استفاده کنیم. بیایید صفحه وب index.htm را در Notepad باز کنیم. بیایید در کد HTML آن چهار بخش مهم از هر صفحه وب را پیدا کنیم: عنوان وب سایت، نوار ناوبری، سیستم عاملمحتوای جدید و اطلاعات حق چاپ بیایید آنها را در آن قرار دهیم ظروف بلوکی.
روی انجیر شکل 10-1 نشان می دهد که عنوان وب سایت قبل از نوار ناوبری آمده است و نه برعکس. بنابراین، بیایید قطعات کد HTML را که این کانتینرها و محتویات آنها را ایجاد می کنند، مبادله کنیم. متعاقباً، استایل هایی را به کانتینرهای ایجاد شده متصل می کنیم که اندازه و مکان آنها را در صفحه وب مشخص می کند. از آنجایی که هر یک از این کانتینرها در هر صفحه وب در یک نمونه وجود دارد، ما از سبک های نامگذاری شده برای این کار استفاده می کنیم. بیایید نام های زیر را برای آنها بگذاریم: Cheader - سبک کانتینر با سربرگ وب سایت. cnav - سبک برای کانتینر با نوار ناوبری. Cmain - سبک برای محفظه محتوای اصلی. Ccopyright - سبک برای ظرف حاوی اطلاعات حق چاپ. در اینجا حرف "c" مخفف "container" است. بنابراین بلافاصله متوجه خواهیم شد که این سبک ها به طور خاص برای کانتینرها اعمال می شود. اتصال یک سبک نامگذاری شده به یک برچسب با تعیین نام آن سبک به عنوان مقدار مشخصه ID تگ انجام می شود. بیایید این کار را برای همه ظروف انجام دهیم. فهرست 10-4 قطعه HTML صفحه وب index.htm را با تمام اصلاحات لازم نشان می دهد. بیایید صفحه وب index.htm را ذخیره کرده و در یک مرورگر وب باز کنیم. آیا چیزی نسبت به قبل تغییر کرده است؟ هیچ چی. HTML (Hyper Text Markup Language): زبان نشانه گذاری فرامتن که برای ایجاد صفحات وب استفاده می شود. صفحه ای که به این شکل نوشته می شود یک سند متنی معمولی است که در آن با کمک تگ ها مکان و طراحی متن، گرافیک و ... مشخص می شود.همه تگ ها به صورت نوشته می شوند. گوشهبراکت (< , >) همه برچسب ها به 2 گروه تقسیم می شوند: -
نیاز به برچسب بسته شدن ( ظروف);
تگ های کانتینر به صورت زیر نوشته می شوند: تک تگ ها به این صورت نوشته می شوند: تگ می تواند پارامترهایی داشته باشد. پارامترهای تگ بعد از آن، در داخل براکت های زاویه ای آن که با فاصله از هم جدا شده اند، نوشته می شوند. مثلا، در زیر تگ های اصلی html و کاربرد آنها آورده شده است.
متن
bgcolor
ارتباط دادن
این لیست برچسب های مورد نیاز را به پایان می رساند. برو جلو...
href، بدون استفاده از آن هیچ سایتی نمی تواند انجام دهد. این قابل درک است، زیرا ترکیب hrefشکل گرفت ارتباط دادنسایت بدون لینک چیست؟
رنگ
اندازه
src، مسیر تصویر (مطلق یا نسبی) را مشخص می کند. تراز کردن، موقعیت تصویر را تعیین می کند. این پارامتر می تواند مقادیر \"center\" ، \"left\" ، \"right\" را بگیرد. alt، عنوانی برای تصویر که وقتی ماوس را روی آن می‌برید ظاهر می‌شود. مرز، ضخامت کادر اطراف تصویر را تعیین می کند. مقداری از 0 تا هر چیزی که می خواهید می گیرد. ولاد مرژویچ عنصر بلوک عنصری است که در یک صفحه وب به صورت مستطیل نمایش داده می شود. چنین عنصری کل عرض موجود را اشغال می کند، ارتفاع عنصر با محتوای آن تعیین می شود و همیشه از یک خط جدید شروع می شود. کانتینرها عناصر بلوکی هستند. و غیره. شما می توانید یک عنصر بلوکی را در داخل دیگری قرار دهید و همچنین عناصر درون خطی را درون آنها قرار دهید ( ، مثلا). افزودن عناصر بلوک به عناصر داخلی ممنوع است (مثال 1). مثال 1: استفاده از عناصر بلوک
لورم ایپسوم دولور سیت آمت... در این مثال، پاراگراف (برچسب ) داخل ظرف قرار می گیرد قرار دادن تگ های بلوک در داخل عناصر درون خطی برای مبتدیانی که هنوز تفاوت بین آنها را درک نکرده اند، رایج تر است. علاوه بر این، مرورگرها یاد گرفته اند که چنین خطاهایی را بگیرند و کد را کم و بیش درست نمایش دهند. با این حال، توصیه می کنیم برای نمایش یک صفحه وب بدون خطا، به مشخصات در این مورد پایبند باشید. به طور پیش فرض، عرض بلوک به طور خودکار محاسبه می شود و تمام فضای موجود را اشغال می کند. در اینجا لازم است مشخص شود که منظور از این چیست. به عنوان مثال، اگر برچسب برخی از مرورگرها مفهوم عرض را کاملاً ضعیف تفسیر می‌کنند، اگرچه مشخصات CSS به وضوح بیان می‌کند که عرض مجموع پارامترهای زیر است: عرض خود بلوک (عرض)، padding (حاشیه)، حاشیه‌ها (padding) و مرزها (حاشیه) ). مثال 2 نشان می دهد که چگونه می توان یک لایه ایجاد کرد که شامل همه این اجزا باشد. مثال 2 عرض لایه
در نتیجه این مثال، لایه ای با عرض 342 پیکسل دریافت می کنیم. روی انجیر 1 نشان می دهد که چه چیزی عرض لایه را تشکیل می دهد. شکل 1. عرض عنصر بلوک در آن صورت زمانی کهدر کد مشخص نشده است، اینترنت اکسپلورر مقدار ویژگی width را به عنوان عرض کل بلوک می گیرد. بیایید به مثال دیگری مربوط به عرض نگاه کنیم. به‌طور پیش‌فرض، عرض لایه روی خودکار تنظیم می‌شود که به لایه اجازه می‌دهد بدون در نظر گرفتن مقادیر حاشیه‌های تنظیم شده، در پنجره مرورگر قرار گیرد. اگر عرض را به 100% تغییر دهید، وقتی یک مقدار padding، margin یا حاشیه اضافه می کنید، یک نوار اسکرول افقی ناگزیر ظاهر می شود. برای به دست آوردن یک نتیجه جهانی، چندین رویکرد وجود دارد. مثال 3 ایجاد سه لایه را نشان می دهد که عرض آنها به صورت درصد تعریف شده است. مثال 3 درصد عرض لایه
لورم ایپسوم دولور سیت آمت... نتیجه مثال در شکل نشان داده شده است. 2. برنج. 2. نمایش عرض لایه ها در مرورگر عرض لایه اول در این مثال (لایه 1 ) روی 100% تنظیم شده است که منجر به نمایش یک نوار اسکرول افقی می شود. برای لایه دوم (layer2) عرض نیز روی 100% تنظیم شده است، اما حاشیه ها برای پاراگراف داخلی (برچسب) تعریف شده است. ). به همین دلیل عرض لایه در همه مرورگرها یکسان خواهد بود. لایه سوم (لایه 3) به هیچ وجه خاصیت عرض را ندارد، بنابراین به طور پیش فرض، auto تعریف شده است. در این حالت لایه تمام عرض پنجره مرورگر را بدون هیچ گونه نوار افقی اشغال می کند. نحوه تنظیم عرض به طرح مورد استفاده و انتخاب توسعه دهنده بستگی دارد، اما در هر صورت، باید ویژگی های عناصر بلوک را در نظر بگیرید و کد جهانی ایجاد کنید. با ارتفاع عناصر بلوک، وضعیت مشابه عرض است. مرورگر مقدار ویژگی height را به عنوان ارتفاع لایه می گیرد و مقدار margin، padding و border را به آن اضافه می کند. اگر ارتفاع لایه به طور صریح تنظیم نشده باشد، به طور خودکار بر اساس حجم محتوا محاسبه می شود. فرض کنید یک لایه دارای ارتفاع بر حسب پیکسل است و محتوای لایه به طور منحصر به فردی بالاتر از ارتفاع مشخص شده است (مثال 4). مثال 4: ارتفاع لایه
نتیجه این مثال در شکل نشان داده شده است. 3. برنج. 3. ارتفاع بلوک در مرورگرهای مختلف مشاهده می شود که مرورگر ارتفاع را بدون تغییر می گذارد، به همین دلیل متن در بلوک قرار نمی گیرد و در بالای لایه قرار می گیرد. ساده ترین راه برای تنظیم رنگ پس زمینه یک عنصر از طریق ویژگی پس زمینه عمومی است. پس‌زمینه با ناحیه‌ای پر می‌شود که با عرض، ارتفاع و مقادیر padding تعریف شده است (شکل 4). برنج. 4. ناحیه ای از لایه که با رنگ پس زمینه پر شده است بنابراین، حاشیه در شکل گیری ناحیه رنگی شرکت نمی کند. به دلیل تفاوت در رویکرد مرورگرها هنگام تشکیل عناصر بلوک، در نمایش حاشیه ها نیز تفاوت وجود دارد. اینترنت اکسپلورر 7 مرز را در داخل بلوک ترسیم می کند، در حالی که فایرفاکس آن را بیرون می کشد. اما اگر از یک پس‌زمینه پر استفاده کنیم، یک تصویر کاملاً مخالف خواهیم دید (شکل 5). و همه به این دلیل که فایرفاکس (Opera) رنگ پس‌زمینه را در لبه بیرونی حاشیه و اینترنت اکسپلورر را در داخل تنظیم می‌کند. شروع از نسخه 8.0 اینترنت اکسپلورر سبک نمایش قاب را تغییر داده است، مانند فایرفاکس در داخل بلوک کشیده شده است. آ. اینترنت اکسپلورر 7 ب فایرفاکس، اینترنت اکسپلورر 8+ برنج. 5. نمایش قاب در مرورگرها مثال 5 نحوه نوشتن کد برای به دست آوردن چنین حاشیه ای را نشان می دهد. مثال 5. قاب نقطه‌دار
تفاوت در رویکرد مرورگرها هنگام ترسیم مرزها فقط در زمینه های رنگی و خطوط چین قابل توجه است. برای یک حاشیه جامد، ظاهر لایه در مرورگرها تقریباً یکسان خواهد بود. عناصر بلوک به عنوان مصالح ساختمانی اصلی هنگام چیدمان صفحات وب عمل می کنند. چنین عناصری با این واقعیت مشخص می شوند که آنها همیشه از یک خط جدید شروع می شوند و کل عرض موجود منطقه ای را که در آن قرار دارند را اشغال می کنند. مشخصات CSS تعریف می کند که ارتفاع و عرض یک عنصر نه تنها با مقادیر ارتفاع و عرض، بلکه با مقدار حاشیه ها، padding ها و حاشیه ها نیز تعیین می شود. مرورگرها در این زمینه به دو بخش تقسیم می شوند: برخی از مشخصات در این مورد پشتیبانی می کنند، در حالی که برخی دیگر آن را نادیده می گیرند و به روش خود عمل می کنند. این مشکلاتی را برای توسعه دهندگانی که مایل به ایجاد صفحات وب جهانی هستند ایجاد می کند. ما فقط می‌توانیم توصیه کنیم که استفاده از ویژگی‌های عرض و ارتفاع را محدود کنیم، زیرا مرورگر پیش‌فرض آرگومان خودکار را تعیین می‌کند، که باعث می‌شود عنصر به طور خودکار اندازه خود را تغییر دهد. |
