تورفتگی li. نحوه حذف padding از یک عنصر HTML فرو ریختن حاشیه های عمودی

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

دو نوع ویژگی در CSS وجود دارد که مسئول padding (CSS) و margin (CSS) عناصر هستند. مکان آنها در تصویر زیر نشان داده شده است:

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

وضعیت برای جداول HTML کمی متفاوت است، زیرا آنها دو پارامتر دیگر دارند - این ویژگی CSS است که فاصله بین مرزها یا فریم های سلول را تغییر می دهد (که می توان آن ها را نیز تورفتگی نامید) و CSS که این فاصله را به طور کلی حذف می کند و باعث می شود مرزهای مشترک تصویر زیر نحوه قرارگیری تمامی این حاشیه ها و بالشتک ها را روی میز نشان می دهد.

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

خوب، حالا که همه اینها را می دانید، اجازه دهید به چند نمونه نگاه کنیم.

نحوه حذف padding از لبه های صفحه HTML

مثال HTML و CSS: حذف padding از تگ BODY

محتوای صفحه

شرح مثال

شرح مثال

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

نحوه حذف لنت از روی میز

مثال HTML و CSS: حذف padding بین سلول های جدول

شرح مثال

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

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

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

"Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. velit esse cillum dolore eu fugiat nulla pariatur. پاراگراف 1.10.32 "de Finibus Bonorum et Malorum" نوشته سیسرو در سال 45 بعد از میلاد. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore vertatis et quasi architecto beatae vitae vitae dicta sunt voloremque aperiam . eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore , ستایش qui in ea voluptate velit esse quam nihil molestiae consequatur، vel illum qui dolorem eum fugiat quo paria voluptas nulla؟ ترجمه انگلیسی 1914، H. Rackham "اما من باید برای شما توضیح دهم که چگونه این ایده اشتباه در تقبیح لذت و ستایش درد متولد شد و من گزارش کاملی از سیستم به شما ارائه خواهم داد و آموزه های واقعی کاشف بزرگ را شرح خواهم داد. هیچ کس خود لذت را رد نمی کند، نمی پسندد یا از آن دوری نمی کند، زیرا لذت است، بلکه به این دلیل که کسانی که نمی دانند چگونه لذت را به طور عقلانی دنبال کنند، با عواقبی بسیار دردناک مواجه می شوند. درد است، اما چون گاه شرایطی پیش می‌آید که زحمت و درد می‌تواند لذت بزرگی را برای او به ارمغان بیاورد، مگر اینکه از آن مزیتی کسب کند؟ اما چه کسی حق دارد از مردی که لذت بردن از لذتی را که آزاردهنده نیست، عیب کند. عواقب، یا کسی که از دردی که هیچ لذتی در پی ندارد اجتناب می‌کند؟» پاراگراف 1.10.33 "de Finibus Bonorum et Malorum" نوشته سیسرو در سال 45 پس از میلاد. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias به استثنای سینت occaecati cupiditate غیر مشروط، similique sunt در culpaquim qui offi. et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus ID quod maxime placeat facere possimus, omnis voluptas assummenda est, omnis dolor repellendus . et molestiae non recusandae Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. ترجمه انگلیسی 1914، H. Rackham "از سوی دیگر، ما با خشم و بیزاری عادلانه مردانی را محکوم می کنیم که از جذابیت های لذت لحظه ای چنان فریفته و افسرده شده اند، آنچنان از هوس کور شده اند، که نمی توانند درد و مشکلی را که پیش بینی می کنند، پیش بینی کنند. ناگزیر است و سرزنش مساوی کسانی است که به دلیل ضعف اراده در انجام وظایف خود کوتاهی می کنند، که همان گفتن از طریق کوتاهی از زحمت و درد است. این موارد کاملاً ساده است و به راحتی قابل تشخیص است. قدرت انتخاب ما مهار نشده است و زمانی که هیچ چیز مانع از توانایی ما در انجام کاری که دوست داریم نمی شود، باید از هر لذتی استقبال کرد و از هر درد اجتناب کرد. غالباً اتفاق می افتد که باید لذت ها را رد کرد و آزارها را پذیرفت. اینها به این اصل گزینش اهمیت می‌دهند: او لذت‌ها را رد می‌کند تا لذت‌های بزرگ‌تر را تأمین کند، یا در غیر این صورت دردها را تحمل می‌کند تا از دردهای بدتر جلوگیری کند.»

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

اول از همه، بیایید تعریف حاشیه ها و بالشتک ها را با توجه به مشخصات W3C یادآوری کنیم. در مدل جعبه، حاشیه ها فاصله بین محتوا (محتوا) و مرز بلوک (حاشیه) است. و padding فاصله بین مرز بلوک و مرز عنصر مجاور یا والد است.

بنابراین، اگر مرز و پس‌زمینه عنصر تنظیم نشده باشد، تفاوتی در استفاده از ویژگی padding یا margin برای تنظیم تورفتگی‌ها وجود ندارد، اما به شرطی که عرض (عرض) و ارتفاع (ارتفاع) عنصر نباشد. تنظیم کنید و الگوریتم محاسبه اندازه محتوا با استفاده از ویژگی های اندازه جعبه تغییر نمی کند.

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

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

این بلوک خبری است. این شامل یک عنوان، فهرستی از اخبار و پیوند «اخبار بیشتر» است. بیایید نام‌های کلاس زیر را به آنها بدهیم: news_title، news__list، و news__more-link.

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

اخبار ( بالشتک: 20px 25px؛ )

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

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

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

با در نظر گرفتن این موضوع، تورفتگی را از پایین برای عنوان، و تورفتگی از بالا را برای پیوند «اخبار دیگر» قرار می دهیم.

News__title ( حاشیه-پایین: 10px؛ ) .news__more-link ( margin-top: 12px; )

ما می‌توانیم با افزودن padding در بالا و پایین لیست اخبار به همان نتیجه خارجی برسیم.

News__list ( حاشیه: 10px 0 12px 0; )

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

می توانید برای هر خبر به جز تورفتگی اول از بالا یا برای هر خبر به جز برای آخرین تورفتگی از پایین تنظیم کنید. گزینه اول ترجیح داده می شود زیرا شبه انتخابگر :first-child در مشخصات CSS 2.1 اضافه شده است و پشتیبانی گسترده تری نسبت به شبه انتخابگر :last-child دارد که فقط در مشخصات CSS نسخه 3.0 اضافه شده است.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

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

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

در این صورت می توانید از روش زیر برای تنظیم تورفتگی استفاده کنید.

Popup__header + .popup__text ( حاشیه بالا: 15 پیکسل؛ )

سپس تورفتگی فقط در صورت استفاده از هر دو عنصر ظاهر می شود. در صورت نمایش فقط عنوان یا فقط متن، تورفتگی اضافی وجود نخواهد داشت.

فرو ریختن حاشیه های عمودی

تفاوت دیگری که همه درباره آن نمی دانند مربوط به فرورفتگی های عمودی بین بلوک های مجاور است. در تعریف تورفتگی که در بالا دادم می گوید که تورفتگی فاصله بین است مرز هابلوک فعلی و همسایه بنابراین اگر دو جعبه را یکی زیر دیگری قرار دهیم و به یکی از آن‌ها یک لایه پایینی 30 پیکسلی و به دیگری یک لایه بالایی 20 پیکسلی بدهیم، بالشتک بین آنها 50 پیکسل نیست، بلکه 30 پیکسل خواهد بود.

یعنی تورفتگی ها با هم همپوشانی دارند و تورفتگی بین بلوک ها برابر با بزرگترین تورفتگی خواهد بود و نه مجموع تورفتگی ها. به این اثر "فروپاشی" نیز می گویند.

لطفاً توجه داشته باشید که تورفتگی های افقی، بر خلاف موارد عمودی، "جمع نمی شوند"، بلکه خلاصه می شوند. فیلدها (padding) نیز خلاصه شده اند.

با اطلاع از "جمع شدن" تورفتگی ها، می توانیم از این ویژگی به نفع خود استفاده کنیم. به عنوان مثال، اگر ما نیاز به ایجاد تورفتگی برای عنوان و متن در داخل مقاله داشته باشیم، برای عنوان سطح اول، تورفتگی را از زیر به 20 پیکسل و برای عنوان سطح دوم، تورفتگی از بالا 20 پیکسل و از زیر 10 پیکسل است. و برای همه پاراگراف ها تورفتگی را از بالا روی 10 پیکسل قرار می دهیم.

h1 ( حاشیه پایین: 24 پیکسل؛ ) h2 ( حاشیه بالا: 24 پیکسل؛ حاشیه پایین: 12 پیکسل؛ ) p ( حاشیه بالا: 12 پیکسل؛ )

اکنون عنوان h2 را می توان هم بعد از عنوان h1 و هم بعد از پاراگراف قرار داد. در هر صورت، لایه بالایی از 24 پیکسل تجاوز نخواهد کرد.

قوانین عمومی

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

1. اگر عناصر مجاور دارای بالشتک یکسان هستند، بهتر است آنها را روی کانتینر اصلی تنظیم کنید، نه روی عناصر.
2. هنگام تنظیم تورفتگی بین عناصر، باید در نظر بگیرید که آیا این عنصر ضروری است یا اختیاری.
3. برای لیستی از عناصر از همان نوع - فراموش نکنید که تعداد عناصر ممکن است متفاوت باشد.
4. حواستان به استفاده از بالشتک عمودی باشد و از این ویژگی در جایی که مفید خواهد بود استفاده کنید.

وظیفه

بالشتک های اطراف لیست گلوله ای یا شماره گذاری شده را بردارید.

راه حل

بسته به نوع لیست، همانطور که در مثال 1 نشان داده شده است، از حاشیه و بالشتک سبک تهی برای انتخابگر UL یا OL استفاده کنید.

مثال 1: تورفتگی یک لیست

HTML5 CSS 2.1 IE Cr Op Sa Fx

• چبوراشکا
• کروکودیل گنا
• شاپوکلیاک

نتیجه این مثال در شکل نشان داده شده است. 1.

برنج. 1. لیست بدون تورفتگی عمودی و افقی

توجه داشته باشید که نشانگرهای لیست که در لبه سمت چپ صفحه وب ظاهر می شوند ناپدید می شوند. برای حذف فقط لایه های بالا و پایین بدون جابجایی لیست به چپ، از ویژگی های margin-top و margin-bottom استفاده کنید (مثال 2).

مثال 2: تورفتگی یک لیست

HTML5 CSS 2.1 IE Cr Op Sa Fx

• چبوراشکا
• کروکودیل گنا
• شاپوکلیاک

هنگام ایجاد یک بلوک با لیستی از پیوندها، معمولاً توصیه می شود از ویژگی display با ویژگی های block یا inline-block استفاده کنید که باعث افزایش اندازه فیلد پیوند فعال می شود. فیلدهای پیوند فعال بزرگ، قابلیت استفاده از عناصر را بهبود می بخشد، عناصر بزرگ به راحتی با ماوس برخورد می کنند.

عناصر با نمایشگر: بلوک به عنوان عناصر بلوک ارائه می شود.

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

یک مثال ساده با لیستی از پیوندها را در نظر بگیرید:

• این کوچولو
• خوک رفت به
• بازار

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

ما می توانیم این را با اندازه دادن فیلد فعال به عرض عنصر والد بهبود دهیم.

Ul a (نمایشگر: بلوک؛ )

ما می توانیم حتی بهتر عمل کنیم.

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

این مقاله از چیزهای واضحی تشکیل شده است، اما اغلب می‌توانیم بلوک‌هایی از پیوندهایی را در اینترنت پیدا کنیم که با فیلدهای فعال بزرگ‌شده «تغییر» نشده‌اند.

مقاله اصلی: حاشیه ها را خارج از لیست پیوندها نگه دارید توسط: کریس کویر در 2010/11/29