مدیریت تورفتگی در html با استفاده از css. آموزش تورفتگی متن در html نحوه تورفتگی از بالای html

به وبلاگ من خوش آمدید. Css (Cascading Style Sheets) گزینه های زیادی برای شخصی سازی ظاهر صفحات وب فراهم می کند. امروز می خواهم به طور خلاصه نحوه تعیین در را نشان دهم تورفتگی cssدر بالا یا در هر طرف دیگر برای هر عنصر.

لبه

حاشیه با استفاده از ویژگی margin تنظیم می شود. با کمک آن می‌توانید حاشیه‌ها را در هر چهار طرف به طور همزمان تنظیم کنید یا از ویژگی‌های دیگر استفاده کنید: margin-top، margin-left، margin-right، margin-bottom که به شما امکان می‌دهد آن را فقط در یک طرف بسازید.

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

P,div(
حاشیه بالا: 20 پیکسل.
}

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

حاشیه ها را می توان در هر طرف فقط با استفاده از یک ویژگی حاشیه نوشت که 4 مقدار در یک ردیف نوشته می شود:

Div(
حاشیه: 20px 10px 20px 10px;
}

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

Div(
حاشیه: 20px 10px;
}

اولین مقدار حاشیه در بالا و پایین و دومین مقدار حاشیه در طرفین است.

تورفتگی

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

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

همچنین مانند حاشیه، می توانید نام طرف را اضافه کنید و فاصله را فقط برای آن تعیین کنید. به عنوان مثال، بالا padding را می توان با استفاده از padding-top نوشت. به طور کلی، ویژگی padding دقیقاً مانند ویژگی margin عمل می کند.

به عنوان مثال، می توانید این قطعه کد را بدهید:

مسدود کردن(
عرض: 200 پیکسل؛
بالشتک: 20 پیکسل;
}

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

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

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

گزینه های CSS Padding

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

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

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

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

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

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

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

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

به عنوان مثال، برای پاراگراف فعلی، یک قانون سبک اعمال کردم که بالشتک سمت چپ را روی 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 باعث افزایش اندازه عنصر صفحه وب می شود. بنابراین، اگر ضخامت حاشیه یا اندازه بالشتک ظروف بلوکی را که طراحی صفحه وب را تشکیل می‌دهند، تغییر دهیم، باید اندازه این ظروف را متناسب با آن تغییر دهیم، در غیر این صورت ممکن است حرکت کنند و طرح تغییر کند. شکسته شده.

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

وظیفه

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

راه حل

همانطور که در مثال 1 نشان داده شده است، از ویژگی margin و padding style با مقدار null برای انتخابگر 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

تورفتگی فهرست

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

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

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

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

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

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

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

اخبار

اخبار دیگر

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

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

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

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

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

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

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

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

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 پیکسل تجاوز نخواهد کرد.

قوانین عمومی

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

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

شرح

ویژگی CSS margin-top حاشیه را در بالای عنصر تنظیم می کند. بالشتک فاصله از لبه بیرونی مرز بالایی عنصر فعلی تا مرز داخلی عنصر اصلی آن یا تا مرز عنصر بالای آن است. لطفاً توجه داشته باشید که عناصر درون خطی (نمایش: درون خطی؛) فقط می توانند حاشیه چپ و راست داشته باشند.

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

توجه: لایه پایین یا بالای یک عنصر فرزند می‌تواند بر ارتفاع کلی عنصر والد تأثیر بگذارد، مگر اینکه اندازه ارتفاع ثابتی داشته باشد.

فیلدها را ادغام کنید

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