لبه بالشتک css. تورفتگی ها و حاشیه ها

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

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

قوانین اساسی موقعیت یابی

یک عنصر بلوک دارای یک قانون حاشیه، یک قانون padding برای عناصر داخل آن، و یک عرض حاشیه است که همچنین می تواند استفاده شود.

تورفتگی در بالا از اهمیت ویژه ای برخوردار است. CSS در یک بلوک، قوانین padding را با قوانین عناصر کاملاً و نسبتاً قرار گرفته در آن بلوک مرتبط می کند.

یک روش معمول برای قوانین CSS: می‌توانید بالشتک را در همه طرف‌ها به طور مساوی، به صورت جفت بالا/پایین و راست/چپ، یا برای هر طرف به طور جداگانه مشخص کنید. مثلا،

• حاشیه: 10 پیکسل
• بالشتک: 10px20px;
• بالشتک: 10px20px30px40px.

در حالت اول، فرورفتگی عنصر از طرفین ظرف بیرونی که در آن قرار دارد تنظیم می شود. در مورد دوم، حاشیه در بالا و پایین 10 پیکسل، در سمت چپ و راست - 20 پیکسل است. در حالت سوم، اندازه تورفتگی ها در همه طرف نشان داده شده است: بالا، راست، پایین و چپ.

در تمام این موارد، تورفتگی CSS بالا 10 پیکسل است.

قوانینی که موقعیت عناصر را تغییر می دهد

اگر یک عنصر چیدمان به طور مطلق قرار نگرفته باشد، در آن قرار می گیرد روند عمومیتشکیل صفحه

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

که در در این مثالبا استفاده از قانون padding: 40px. نیاز به کاهش کافی قوانین عرض و ارتفاع تا 80 پیکسل دارد. در غیر این صورت، اندازه بلوک scCurrInfo از مرزهای بلوک بیرونی فراتر خواهد رفت.

اگر قانون padding را از توضیحات scCurrInfo حذف کنیم، اما آن را با مقدار 20 پیکسل به توضیحات سبک آیتم لیست اضافه کنیم، فقط دریافت خواهیم کرد تورفتگی بالا CSS این مقدار را برای طرف های دیگر اعمال نمی کند.

به طور طبیعی، این استفاده از قانون تورفتگی برای هر عنصر li اعمال می شود.

روش های کلی قالب بندی محتوا

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

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

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

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

موقعیت یابی مطلق

بلوک با قانون POSITION: مطلق ; در مکانی تعیین شده توسط مختصات آن نسبت به بلوکی که در آن قرار دارد قرار خواهد گرفت.

ویژگی مشخص قوانین CSS "تمرین - بهترین معیارحقیقت" در بیشتر موارد، به خصوص زمانی که سازگاری بین مرورگرها مورد نیاز است و چیدمان به صورت دستی انجام می شود، ترجیحاً به مطالعه کتابچه های راهنمای کامل بر روی شیوه نامه های آبشاری است.

استفاده از جداول اغلب منجر به مشکلات تغییر محتوای سلول می شود. یک افست مشابه در یک بلوک همیشه بر همه عناصر تأثیر نمی گذارد. با آزمایش می توانید به نتیجه دلخواه برسید. یک کار بی اهمیت: چگونه حذف padding بالا همیشه یک راه حل بی اهمیت برای CSS نیست.

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

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

عناصر می توانند تو در تو یا در کنار یکدیگر قرار گیرند. بیایید به مثال زیر نگاه کنیم:

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

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

راه های مختلفی برای تنظیم این سبک ها وجود دارد. به عنوان مثال، به طور مستقیم اندازه تمام حاشیه ها یا تورفتگی ها را با یک آرگومان در برخی واحدهای اندازه گیری (px، ex، em، pt، cm و غیره) مشخص کنید:

padding: 3px; حاشیه: 3 پیکسل

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

بالشتک: 3px 5px; حاشیه: 3px 5px;

اولی مقدار حاشیه ها/تورفتگی ها را در بالا و پایین تعیین می کند، دومی - در سمت چپ و راست. وقتی سه استدلال داده می شود:

padding: 3px 5px 2px; حاشیه: 3px 5px 2px;

اولی حاشیه/تورفتگی در بالا، دومی هر دو سمت چپ و راست، سوم در پایین است. با چهار استدلال:

padding: 3px 5px 2px 6px; حاشیه : 3px 5px 2px 6px ;

اولی حاشیه/فضا در بالا، دومی در سمت راست، سومی در پایین، چهارمی در سمت چپ است. یادآوری آن آسان است: اولین مورد از بالا و سپس در جهت عقربه های ساعت است. علاوه بر این، می توانید با استفاده از سبک های مناسب، حاشیه ها و بالشتک ها را برای یک لبه خاص به طور جداگانه تنظیم کنید: padding-top, padding-right, بالشتک پایین, padding-left, حاشیه بالا, حاشیه-راست, حاشیه-پایین, حاشیه چپ. مقدار این سبک‌ها فقط می‌تواند یک آرگومان باشد، که مقدار حاشیه/پرده برای یک طرف مشخص را مشخص می‌کند.

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

padding: 5px;

در نتیجه صفحه به شکل زیر تغییر می کند:

بیایید اکنون به تورفتگی ها نگاه کنیم. دو جدول در مجاورت یکدیگر قرار دارند که اگر بخواهیم کمی آنها را از هم جدا کنیم می توانیم تورفتگی اعمال کنیم. در اینجا دو گزینه وجود دارد: یا تورفتگی پایین جدول اول، یا تورفتگی بالای جدول دوم. از دومی استفاده کنیم:

margin-top: 5px;

لطفاً توجه داشته باشید که ما تورفتگی را به طور خاص برای جدول تنظیم می کنیم، و نه به سلول جدول، همانطور که در مورد فیلدها وجود دارد. نتیجه این است:

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

کد HTML صفحه آزمایشی:

<html > <سر > <عنوان >تست</title> <متا http-equiv = محتوای "Content-Type" = "text/html;charset=utf-8" > </head> <بدن > <سبک >جدول (عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ حاشیه: 1 پیکسل توپر #555؛ بسته شدن حاشیه: جمع کردن) td (تراز عمودی: بالا؛ بالشتک: 0 پیکسل) div (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: قرمز)</style> <سبک جدول = "پس زمینه: آهک" > <tr > <td style = "padding: 5px" > <div style = "حاشیه: 0px" ></div> </td> </tr> </جدول> <سبک جدول = "پس‌زمینه: sky blue; margin-top: 5px"> <tr > <td ></td> </tr> </جدول> </body> </html>

روز خوب! تنظیم تورفتگی برای متن و عکس موضوع اصلی نشریه امروز است. بیایید نگاهی دقیق تر به این بیندازیم که چه رویکردهایی را می توان در عمل به کار برد.

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

تنظیم تورفتگی با درج فاصله

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

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

استفاده از برچسب نقل قول

با مطالعه دقیق نحوه تورفتگی متن در کد HTML، می توانید با آن روبرو شوید روش جایگزین، دادن امکانات بیشتر.

در اینجا باید از blockquote استفاده کنید که به شما امکان می دهد قطعه را در سمت چپ و راست حدود 40 پیکسل حرکت دهید. کافی است کدی مشابه با مثال داده شده بنویسید:

این روش به شما امکان می دهد عبارات را با مقدار ثابت 40 پیکسل دستکاری کنید. همچنین شایان ذکر است که در این تگمعمولاً با یک نقل قول به پایان می رسد.

گزینه های جایگزین

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

هنگامی که لازم است تعداد پیکسل های مورد نیاز از یک عکس اندازه گیری شود، کدهای ساده اما موثر ترجیح داده می شوند.

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

اطلاعات به پایان رسیده است. به من بگو، آیا اطلاعاتی را که به دنبالش بودی پیدا کردی؟ پاسخ را می توان در نظرات نوشت.

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

انتشار مطالب ادامه دارد. اشتراک در پست الکترونیکبرای به روز رسانی پروژه بعدا میبینمت.

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

حاشیه و بالشتک: تفاوت چیست؟

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

• فیلد توسط ویژگی مشخص شده است لایه گذاری، تورفتگی - لبه;
• حاشیه با شکاف بین محتوا و مرز بلوک، تورفتگی - بین مرزهای بلوک های مجاور تعیین می شود.
• ممکن است حاشیه ها در ابعاد عنصر (عرض و ارتفاع) در نظر گرفته شود یا خیر.

دارایی حاشیه

بنابراین، برای تعیین تورفتگی افقی یا عمودی متن CSS، از ساختار استفاده کنید لبه. این ویژگی برای تگ اعمال می شود تعریف پاراگراف سند در بسیار مورد سادهبه صورت زیر نوشته شده است:

حاشیه: 12 پیکسل

این خط به این معنی است که در اطراف بلوک متن (یا هر بلوک دیگری) یک فرورفتگی 12 پیکسل در هر طرف وجود خواهد داشت. برای افزایش فاصله، به عنوان مثال، سه برابر، فقط بنویسید:

حاشیه: 36 پیکسل

اما اگر فاصله بین بلوک ها در هر طرف متفاوت باشد چه؟ توسعه دهندگان صفحات وب از چندین شکل ضبط استفاده می کنند:

1. حاشیه: 11 پیکسل 22 پیکسل.
2. حاشیه: 11 پیکسل 22 پیکسل 33 پیکسل.
3. حاشیه: 11px 22px 33px 44px.

در مثال اول، 11 پیکسل از حاشیه های پایین و بالای بلوک، و 22 پیکسل در کناره های بلوک فرورفته خواهند شد. طبق فرم ضبط دوم، 11 پیکسل بین لبه بالای بلوک و محتوا، 33 پیکسل بین پایین و 22 پیکسل در طرفین وجود خواهد داشت. در حالت سوم، بالشتک 11 پیکسل در بالا، 22 پیکسل در سمت راست، 33 پیکسل در پایین و 44 پیکسل در سمت چپ خواهد بود.

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

حاشیه سمت راست: 22 پیکسل.

برای اضلاع دیگر، فواصل اطراف بلوک برابر با مقدار عنصر والد فرض می شود.

ویژگی لبهدارای ویژگی است که یک توسعه دهنده باید هنگام استفاده از تورفتگی عمودی متن CSS در نظر داشته باشد. فواصل عناصر مجاور خلاصه نمی شوند، بلکه بر روی یکدیگر قرار می گیرند. به عنوان مثال، اجازه دهید یکی از بلوک ها داشته باشد حاشیه پایین: 15 پیکسلو بلوک مجاور آن در زیر حاشیه بالا: 35 پیکسل. محاسبات مدرسه و عقل سلیم نشان می دهد که فضای کل بین آنها 50 پیکسل خواهد بود. در عمل اینطور نیست. مسدود کردن با ارزش عالیخواص لبههمسایه خود را "جذب" خواهد کرد. در نتیجه فاصله بین عناصر 35 پیکسل خواهد بود.

"خط قرمز

تنظیم سند در ویرایشگر متن، کاربران ترجیح می دهند از هر کدام بپرسند پاراگراف جدیدبا استفاده از خط قرمز با کمک CSS، به راحتی می توان متن را در سمت چپ قرار داد - از ساختار استفاده می شود تورفتگی متن. اینگونه نوشته شده است:

تورفتگی متن: 11 پیکسل.

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

text-indent: 11px;

text-align: توجیه کردن.

علاوه بر پیکسل ها، هنگام توصیف نشانه ها، مجاز است از واحدهای دیگر - اینچ، امتیاز، درصد استفاده شود. اجازه دهید بلوک دارای یک صفحه متنی CSS 10٪ باشد. با عرض بلوک 500 پیکسل، خط قرمز 50 پیکسل (10٪ از 500) خواهد بود.

برای از این ملکمقدار قابل تنظیم است به ارث می برند. این ورودی می گوید که بلوک از ویژگی مشابه بلوک والد استفاده می کند.

text-indent: ارث بردن.

با کمال تعجب، می تواند مقادیر منفی نیز بگیرد! در این حالت، به اصطلاح overhangs تشکیل می شود، یعنی متن اصلی در جای خود باقی می ماند و خط اول 22 پیکسل به سمت چپ منتقل می شود:

تورفتگی متن: -22 پیکسل.

برای جلوگیری از خروج حروف از مرز سمت چپ مرورگر، علاوه بر تورفتگی متنبرای تنظیم فیلد باید از ساختار استفاده کنید:

padding-left: 22px.

ویژگی های اصلی CSS بررسی می شود. و تمرین به تحکیم آنها کمک خواهد کرد. در اینجا چند نکته نهایی برای استفاده از آنچه آموخته اید در توسعه وب سایت خود آورده شده است:

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

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

گزینه های CSS Padding

با کمک شیوه نامه های آبشاری می توان دو نوع تورفتگی را تنظیم کرد.

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

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

برای وضوح تصویر:

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

padding در CSS با استفاده از padding (بالا، پایین، چپ، راست)

ویژگی های سبک padding-left، padding-top، padding-right و padding-bottom به شما امکان می دهد مقادیر padding را به ترتیب در سمت چپ، بالا، راست و پایین یک عنصر صفحه وب تنظیم کنید:

padding-top | padding-right | padding-bottom | padding-left: value | علاقه | به ارث می برند

مقدار تورفتگی را می توان بر حسب پیکسل (px)، درصد (%) یا واحدهای دیگر قابل قبول برای CSS مشخص کرد. هنگام تعیین درصد، مقدار از عرض عنصر محاسبه می شود. معنی ارثنشان می دهد که از والدین به ارث رسیده است.

به عنوان مثال، برای پاراگراف فعلی، یک قانون سبک اعمال کردم که بالشتک سمت چپ را روی 20 پیکسل، بالشتک بالا را روی 5 پیکسل، بالشتک سمت راست را روی 35 پیکسل و لایه پایین را روی 10 پیکسل قرار می دهد. ورودی قانون به این صورت خواهد بود:

p.test(
padding-left:20px;
padding-top: 5px;
padding-right:35px;
padding-bottom: 10px
}

قانون بالشتک مرکببه شما امکان می دهد تورفتگی ها را در تمام طرف های یک عنصر صفحه وب به طور همزمان مشخص کنید:

لایه گذاری:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

که در حکومت جمعیمی توانید از یک، دو، سه یا چهار مقدار استفاده کنید و آنها را با فاصله از هم جدا کنید. در این مورد، تأثیر به تعداد مقادیر بستگی دارد:

• اگر یک مقدار را مشخص کنید، مقدار تورفتگی در تمام طرف های عنصر صفحه را تعیین می کند.
• اگر دو مقدار را مشخص کنید، اولی مقدار فرورفتگی را در بالا و پایین تعیین می کند، و دومی - در سمت چپ و راست.
• اگر سه مقدار را مشخص کنید، اولی مقدار فرورفتگی را در بالا، دومی - در سمت چپ و راست، و سومی - در پایین را تعیین می کند.
• اگر چهار مقدار مشخص شده باشد، اولی مقدار فرورفتگی را در بالا، دومی در سمت راست، سومی در پایین و چهارمی در سمت چپ تعیین می کند.

بنابراین، قانون CSS بالا را می توان تا حد امکان کوتاه کرد و به صورت زیر نوشت:

p.test( padding: 5px 35px 10px 20px)

ویژگی margin یا حاشیه ها در CSS

ویژگی های سبک margin-left، margin-top، margin-right و margin-bottom به شما امکان می دهد مقادیر حاشیه را به ترتیب، چپ، بالا، راست و پایین تنظیم کنید:

حاشیه بالا | حاشیه-راست | حاشیه-پایین | حاشیه چپ:<значение>|خودکار|ارث بردن

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

مقدار تورفتگی را می توان بر حسب پیکسل (px)، درصد (%) یا سایر واحدهای مجاز برای CSS مشخص کرد:

پ(
حاشیه سمت چپ: 20 پیکسل؛
}
h1(
margin-right:15%;
}

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

استفاده از آن به عنوان مقادیر تورفتگی های خارجی مجاز است مقادیر منفی:

پ(
margin-left:-20px;
}

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

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

لبه:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

هنگام تعیین یک، دو، سه یا چهار مقدار padding، این ویژگی از قوانین مشابه با قانون padding تبعیت می کند.

گزینه های مرزی با استفاده از ویژگی Border

هنگام تنظیم فریم ها، سه نوع پارامتر وجود دارد:

• عرض مرز - ضخامت حاشیه؛
• مرز رنگ - رنگ حاشیه؛
• حاشیه - نوع خطی که قاب با آن ترسیم می شود.

بیایید با پارامتر ضخامت قاب شروع کنیم:

border-width: [مقدار | نازک | متوسط ​​| ضخیم] (1،4) | به ارث می برند

ضخامت قابرا می توان برحسب پیکسل یا در موارد دیگر موجود در آن مشخص کرد واحدهای css. متغیرهای نازک، متوسط ​​و ضخیم ضخامت حاشیه را به ترتیب روی 2، 4 و 6 پیکسل قرار می دهند:

border-width: متوسط;

مانند ویژگی‌های padding و margin، پارامتر عرض مرز یک، دو، سه یا چهار مقدار را مجاز می‌کند، بنابراین عرض حاشیه را برای همه طرف‌ها به طور همزمان یا برای هر طرف جداگانه تنظیم می‌کند:

عرض حاشیه: 5px 3px 5px 3px

برای پاراگراف فعلی، ضخامت حاشیه بالایی را 1 پیکسل، سمت راست 2 پیکسل، پایین 3 پیکسل، و سمت چپ را 4 پیکسل با استفاده از قانون ایجاد کنید (عرض حاشیه: 1px 2px 3px 4px؛)

با استفاده از ویژگی های سبک border-left-width، border-top-width، border-right-width و border-bottom-width می توانید ضخامت سمت چپ، بالا، راست و پایین حاشیه را به ترتیب تنظیم کنید:

حاشیه-چپ-عرض|حاشیه-بالا-عرض|حاشیه-راست-عرض|حاشیه-پایین-عرض: نازک|متوسط|ضخیم|<толщина>| ارث بردن

پارامتر بعدی رنگ حاشیه است که می توانید با آن کنترل کنید رنگ قاب:

حاشیه-رنگ: [رنگ | شفاف] (1،4) | به ارث می برند

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

p (عرض حاشیه: 2 پیکسل؛ رنگ حاشیه: قرمز)

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

با استفاده از ویژگی های سبک حاشیه-چپ-رنگ، حاشیه-بالا-رنگ، حاشیه-راست-رنگ و حاشیه-پایین-رنگ رنگ، می توانید رنگ سمت چپ، بالا، راست و پایین حاشیه را به ترتیب تنظیم کنید:

رنگ حاشیه-چپ|رنگ-حاشیه-بالا|رنگ حاشیه-راست|رنگ حاشیه-پایین: شفاف|<цвет>| ارث بردن

و آخرین پارامتر border-style را مشخص می کند نوع قاب:

حاشیه به سبک: (1،4) | به ارث می برند

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

ویژگی های سبک به سبک border-left-style، border-top-style، border-right-style و border-bottom-style سبک خطوطی را که در سمت چپ، بالا، راست و پایین حاشیه ترسیم می شود، مشخص می کند. به ترتیب:

حاشیه-چپ-سبک|سبک حاشیه-بالا|سبک حاشیه-راست|سبک حاشیه-پایین: هیچکدام|پنهان|نقطه دار|پیچیده|جامد|دوگانه|شیار|برجستگی|داخلی|ابتدای|به ارث بردن

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

مرز: | به ارث می برند

مقادیر می توانند به هر ترتیبی باشند و با فاصله از هم جدا شوند:

td (حاشیه: 1px زرد ثابت)

برای تنظیم یک حاشیه فقط در طرف های خاصی از یک عنصر، ویژگی های border-top، border-bottom، border-left، border-right وجود دارد که به شما امکان می دهد پارامترهایی را برای بالا، پایین، چپ و سمت راستچارچوب

تنها چیزی که باقی می ماند خلاصه کردن است:

• برای کار لایه گذاریاز ملک استفاده می کنیم لایه گذاری;
• برای تنظیمات حاشیه هایک قانون وجود دارد لبه;
• پارامترهای فریمبا استفاده از ویژگی مشخص می شوند مرز.

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

همین، دفعه بعد می بینمت!