نحوه تنظیم حاشیه CSS و padding (و نکات جالب چیدمان). Padding، Margin و Border - ما در CSS padding داخلی و خارجی، و همچنین فریم‌ها را برای همه طرف‌ها (بالا، پایین، چپ، راست) تنظیم می‌کنیم.

این راهنما به شما کمک می کند تا ویژگی های CSS مانند حاشیه، padding و margin را بهتر درک کنید. این ویژگی ها برای برنامه نویسان برای قرار دادن عناصر در صفحه با توجه به چیدمان بسیار مفید است.

بیایید یک div ایجاد کنیم و ویژگی های margin، padding و border را به آن بدهیم.

بالشتک خاصیت

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

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px
padding-left: 10px

این ورودی را می توان کوتاه کرد:

بالشتک: 25px 50px 75px 100px;
- 25 پیکسل بالا
- سمت راست 50 پیکسل
- 75 پیکسل پایین
- 100 پیکسل سمت چپ
padding: 25px 50px 75px;
- 25 پیکسل بالا
- راست و چپ 50 پیکسل
- 75 پیکسل پایین
بالشتک: 25px 50px;
- بالا و پایین 25 پیکسل
- راست و چپ 50 پیکسل
padding: 25px;
- همه 25 پیکسل

توجه: مقدار padding به عرض عنصر اضافه می شود و به پس زمینه عنصر بستگی دارد.

به عبارت دیگر داریم عنصر divبا کلاس div-1:

Div.div-1 (عرض: 150 پیکسل؛ بالشتک: 25 پیکسل؛)

مرورگر بالشتک چپ و راست را به عرض عنصر اضافه می کند. در نتیجه، عنصری با عرض 200 پیکسل دریافت می کنیم.

اموال مرزی

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

عرض مرز

ویژگی border-width برای تعیین عرض حاشیه استفاده می شود. عرض بر حسب پیکسل یا با استفاده از یکی از مقادیر از پیش تعریف شده مشخص می شود: نازک (نازک)، متوسط (متوسط) یا ضخیم (ضخیم).

رنگ لبه

از ویژگی border-color برای تعریف رنگ حاشیه استفاده می شود. رنگ را می توان به روش های زیر تنظیم کرد:

نام - نام رنگ، به عنوان مثال، "قرمز"
RGB - یک مقدار RGB را تعریف می کند، به عنوان مثال "rgb(255,0,0)"
Hex - یک مقدار هگز را تعریف می کند، به عنوان مثال، "#ff0000"

سبک حاشیه

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

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

Div.div-2 (حاشیه: 1px جامد #cccc؛ )

دارایی حاشیه

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

شما می توانید مقادیر حاشیه را برای عنصری مانند این تعریف کنید:

margin-top: 100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

این ورودی را می توان کوتاه کرد:

حاشیه: 25px 50px 75px 100px;
- حاشیه بالا 25 پیکسل
- حاشیه سمت راست 50 پیکسل
- حاشیه پایین 75 پیکسل
- حاشیه سمت چپ 100 پیکسل
حاشیه: 25px 50px 75px;
- حاشیه بالا 25 پیکسل
- حاشیه راست و چپ 50 پیکسل
- حاشیه پایین 75 پیکسل
حاشیه: 25 پیکسل 50 پیکسل;
- حاشیه بالا و پایین 25 پیکسل
- حاشیه راست و چپ 50 پیکسل
حاشیه: 25 پیکسل
- هر چهار حاشیه 25 پیکسل

با استفاده از مقادیر حاشیه پیش فرض می توانید کادر را به صورت افقی در مرکز قرار دهید.

اکتبر 18, 2017 در 03:36 ب.ظ

سازماندهی تورفتگی ها در طرح (حاشیه/بالشتک)

css،
HTML

آموزش

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

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

اصول اساسی:

تورفتگی به آخرین عنصر ممکن در خانه داده می شود.
تورفتگی برای عناصر مستقل (بلوک BEM) قابل تنظیم نیست.
در آخرین عنصر گروه، تورفتگی روی صفر (همیشه) تنظیم می شود.

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

حاشیه (ها) از عنصر قبلی به عنصر بعدی، از اول به دوم، از بالا به پایین، از چپ به راست تنظیم می شود.

این بدان معنی است که خواص مانند margin-left و margin-top استفاده نمی شود(نه بدون استثنا). با پد، کمی متفاوت است (به جز اینکه برای اهداف تزئینی، افزایش مساحت پیوند و غیره استفاده می شود). هنگامی که یک بلوک از بالا یا سمت چپ نیاز به بالشتک دارد، آن را از قسمت بالای صفحه و بالشتک سمت چپ والد دریافت می کند.

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

تورفتگی روی آخرین عنصر ممکن در خانه تنظیم شده است

حاشیه (ها) فقط بین عناصر خانه درختی مجاور تنظیم می شود.

در مثال 3 لیست، در ساختار زیر:

دور، دور، فراتر از لفظی.

...

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

در این وضعیت، .main-section__item آخرین تورفتگی ممکن برای جدا کردن لیست ها است. اگر تورفتگی را روی div, list, extra, link قرار دهید، می‌توان به همین اثر دست یافت، اما این درست نخواهد بود.

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

عنوان در بخش هفت کلمه ای

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

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

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

padding را نمی توان برای عناصر مستقل تنظیم کرد (بلوک BEM)

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

اگر نیاز به تورفتگی بلوک دارید. بدون پیش داوری، این کار با موارد زیر انجام می شود:

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

.block__item > .block ( margin-right: 10px; ) .block.block__item ( margin-right: 10px; ) .block-wrap > .block ( margin-right: 10px; )

در آخرین عنصر گروه، تورفتگی روی صفر تنظیم می شود (همیشه)

بیایید یک لیست و یک تصویر را به عنوان مثال در نظر بگیریم.

این منوی افقیو آرم (که به دلایلی در سمت راست است).

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

بیایید مثال دیگری بزنیم:

ما به تورفتگی بین اخبار علاقه مندیم که توسط .blog-preview__item ( margin-bottom: 20px; ) تنظیم شده است. آخرین حاشیه بر روی صفر تنظیم شده است و padding پایین با padding blog-preview انجام می شود. آنچه در اصل دوم گفته شد.

بیشتر از سایر کلاس های شبه، باید از :last-child استفاده شود.

Item:not(:last-child) ( margin-bottom: 20px; ) // or // .item ( // styles other // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // یا margin-top، ایده اصلی در اینجا در جهت حاشیه نیست، بلکه در صورت عدم وجود غیر ضروری // .item + .item ( margin-top: 20px; ) // یا // .item ( // سبک های دیگر // & + & ( حاشیه بالا: 20 پیکسل؛ ))

استثناها

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

P.S.خواندن پست را توصیه می کنم

منبع: حاشیه یا بالشتک؟
فیلیپ اسپورر.
ترجمه: vl49.

چه زمانی بهتر است از حاشیه و چه زمانی از padding برای مقاصد قالب بندی استفاده کنیم و آیا این مهم است؟

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

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

که در این مثالدو نوع فاصله وجود دارد:

بین کارت ها (آبی)؛

بین کارت ها و ظرف آنها (سبز)؛

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

پیاده سازی یک مثال با CSS؟

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

ظرف(
بالشتک: 16 پیکسل
}
.card + .card(
حاشیه: 0 0 0 8 پیکسل;
}

فقط 2 انتخابگر و 2 قانون.

کارکرد علامت مثبت چیست؟

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

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

این به این معنی است که ما توانایی اضافه کردن هر تعداد کارت را داریم که فاصله بین آنها همیشه هشت پیکسل خواهد بود.

همه چیز خوب کار می کند تا زمانی که لازم باشد چیزی غیر از کارت را در کنار کارت ها قرار دهیم. خوب، بیایید بگوییم یک دکمه "افزودن کارت" ("افزودن کارت"):

بر اساس قطعه CSS که قبلاً داریم، احتمالاً به عنصر جدیدی که نشان دهنده دکمه است کلاس .card نمی دهیم، زیرا این یک کارت نیست. چگونه بودن؟ آیا ارزش آن را دارد که یک نام کلاس اضافی .add-card ایجاد کنیم که حاوی همان قانون با ویژگی margin مانند کلاس .card باشد؟ نه راه حل بهتری هست

جغد لوبوتومی شده + .

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

ظرف(
بالشتک: 16 پیکسل
}
/* خوب، جغد لوبوتومی شده را شناختی؟ */
کانتینر > * + * (
حاشیه: 0 0 0 8 پیکسل;
}

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

در نهایت.

من صمیمانه امیدوارم که مطالب ارائه شده در اینجا به شما کمک کرده باشد که بفهمید چه زمانی از padding برای جدا کردن محتوای موجود در ظرف استفاده کنید و چه زمانی از حاشیه استفاده کنید.

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

لایه گذاری- برای فضاهای بین ظرف و محتوای آن.

لبه- برای شکاف بین عناصر داخل ظرف.

مقالات یادداشت های فناوری اطلاعات HTML&CSS بیایید برای همیشه به یاد داشته باشیم: تفاوت بین حاشیه و بالشتک چیست
Shastaya در انجمن ها با این واقعیت روبرو شد که هنوز این سوال مطرح می شود که چه کاری انجام می دهد لایه گذاری، و چی لبهو چه تفاوت هایی بین آنها وجود دارد. به همین دلیل تصمیم گرفتم در مورد آن یادآوری کنم. بنابراین، بدون توسل به عبارات مبهم، بیایید کار را تعیین کنیم و نمونه ای را تجزیه و تحلیل کنیم که همه چیز بر اساس آن روشن می شود.
وظیفه: در صفحه نیاز به بلوک قرمز(200x200 پیکسل)، که از لبه های مرورگر دور می شودبالا و سمت چپ به ترتیب با 40 و 70 پیکسل و متنی که داخل آن از سمت چپ و بالا تورفتگی دارددر 40 پیکسل
راه حل: به تصویر و کد نگاه کنید. بلوک قرمز ما نباید بیشتر از 200 در 200 پیکسل باشد و باید از لبه‌های مرورگر (یا سایر بلوک‌های محتوا) پر شود. در واقع، ما این تورفتگی ها را از طریق حاشیه انجام می دهیم. اگر ما padding انجام دهیم، آنگاه padding در داخل بلوک قرمز ما اتفاق می افتد و padding با پس زمینه خود بلوک (یعنی قرمز) به دست می آید.

200?"200px":""+(this.scrollHeight+5)+"px");">

متن، متن، متن زیاد، مقدار زیادی - متن بسیار زیاد

علاوه بر ویژگی های استفاده شده (خطوط 6-9)، ویژگی های margin-right، padding-right، margin-bottom، padding-bottom نیز وجود دارد - آنها به ترتیب برای تورفتگی های سمت راست و پایین هستند. مقادیر همه این ویژگی ها می تواند بر حسب پیکسل (px)، درصد (%) یا واحد em باشد.
اساساً همین است. با این حال، برخی از ویژگی های دیگر کار با آنها وجود دارد.

ویژگی های حاشیه و بالشتک

اگر بلوک ها دارای ویژگی float CSS هستند، باید display:inline را روی بلوک ها تنظیم کنید تا در سمت چپ و راست هیچ تورفتگی دوگانه ای وجود نداشته باشد (اطلاعات بیشتر در مقاله چگونه اینترنت اکسپلورر 6 را با ویژگی margin CSS دوست کنیم. ؟)

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

اگر حاشیه-چپ و حاشیه-راست را با مقادیر خودکار برای برخی از بلوک ها تنظیم کنید، سپس اگر بلوک دارای عرض ثابت (مثلا 400 پیکسل) باشد و خاصیت float CSS وجود نداشته باشد، این بلوک در مرکز آن تراز می شود. عنصری که در آن قرار دارد. در واقع برای چیدمان غیر لاستیکی با تراز مرکزی، معمولاً از این روش تراز استفاده می شود. حتی اگر IE 5.5 و نسخه های قبلی از مقدار خودکار پشتیبانی نمی کند، باز هم شما را از استفاده همیشه از آن باز نمی دارد.

استفاده از بالشتک و حاشیه در جداول نامطلوب است، زیرا تأثیر آن در جداول غیر قابل پیش بینی خواهد بود. مرورگرهای مختلف.
و آخرین چیزی که می خواستم بگویم. فراموش نکنید که از ساختارهای پست کوتاه مانند margin: 10px 0 5px 20px استفاده کنید. اگر تورفتگی صفر باشد، می توانید به سادگی یک صفر را بدون مشخص کردن پارامترها قرار دهید. یادآوری اینکه کدام یک از پارامترها به کدام مرز تعلق دارد بسیار آسان است - برای بلوک، تورفتگی ها در جهت عقربه های ساعت حرکت می کنند: شماره اول در بالا، دومی در سمت راست، سومی در پایین، چهارمی در سمت راست است. ترک کرد.
این در واقع تمام چیزی است که امروز می خواستم به شما بگویم. آخر هفته همه مبارک!
+

در این تاپیک می توانید در مورد مطالب سوال بپرسید.

بیایید ببینیم تفاوت بین حاشیه و padding چیست. برای انجام این کار، یک بار دیگر مدل جعبه در CSS را به یاد بیاورید.

MARGIN (حاشیه) -این فاصله از مرز (قاب) بلوک، تا نزدیکترین عناصر، یا، اگر وجود ندارد، تا لبه های سند است.

لایه گذاری -مانند فاصله داخلی بین مرز (قاب) و محتویات بلوک.

مثال: بیایید سه سبک برای سه پاراگراف مختلف با مقادیر حاشیه و padding مختلف ایجاد کنیم و به نتیجه نگاه کنیم:

آن ها مقادیر در جهت عقربه های ساعت نوشته می شوند: بالا، راست، پایین، چپ.

در چه مواردی و در چه زمینه هایی استفاده از تورفتگی بهتر است؟

چند تفاوت کلیدی:

تورفتگی ها (بالشتک) در داخل بلوک قرار دارند و حاشیه ها (حاشیه) - خارج از آنها.

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

14. ارتفاع (ارتفاع) و عرض (عرض) بلوک ها

به طور پیش فرض، ارتفاع و عرض بلوک ها به طور خودکار تعیین می شود، یعنی. هرچه متن (یا محتوای دیگر) بیشتر باشد، بلوک گسترده تر و بلندتر است.

اما، با کمک فناوری CSS، می‌توانیم عرض و ارتفاع بلوک‌های مورد نیاز خود را تنظیم کنیم.

HEIGHT- ویژگی که ارتفاع بلوک را تعیین می کند.

WIDTH– خاصیتی که عرض بلوک را تعیین می کند.

معمولاً این عنصر به عنوان بلوک در CSS استفاده می شود. DIV. با این حال، ویژگی عرض و ارتفاع را می توان برای پاراگراف ها، لیست ها و موارد دیگر اعمال کرد.

بیایید 4 کلاس ایجاد کنیم و آنها را یکی یکی به همان کادر اختصاص دهیم (in این مورد DIV) با متن.

اکنون ارتفاع ثابت است و عرض توسط محتوا کشیده می شود.

.box3(عرض: 300 پیکسل؛ ارتفاع: 600 پیکسل؛ حاشیه: 1 پیکسل قرمز ثابت؛ پس‌زمینه: #FFE446؛ )

در اینجا، هم ارتفاع و هم عرض ثابت است.

جعبه 4(عرض: 300 پیکسل؛ ارتفاع: 300 پیکسل؛ حاشیه: 1 پیکسل قرمز ثابت؛ پس‌زمینه: #FFE446؛ )

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

توجه داشته باشید!

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