کاربرد negative margins در css و نحوه استفاده از آن
برخلاف paddind و border شما می توانید به margin ها مقادیر منفی اختصاص دهید. رفتار دقیق در margin ها بستگی دارد به اینکه شما روز کدام سمت از المنت اعمال کرده اید این باعث می شود که المنت شما روی عناصر دیگر موجود در صفحه تداخل پیدا کند.اگر روی قسمت راست و پایین اعمال شود marginمنفی نمیتواند عنصر را جابه جا کند.
هنگامیکه برای بلاک المنت خود عرض را دقیق مشخص نکرده اید به صورت طبیعی اندازه عرض container خود را پر میکند.اما دادن یه margin منفی می تواند شرایط را تغییر دهد.تا زمانی که هیچ اندازه ای تعیین نشده باشد لبه ی عنصر را به سمت راست هل میدهد و آن را به خارح از container هل می دهد. این حلت را با یک margin منفی از سمت چپ ترکیب کنید که باعث می شود عنصر از هر دو طرف از container بیرون بزند.
هشدار! استفاده از marginهای منفی باعث می شود که تداخل عناصر با هم در عناصر با قابلیت کلیک قسمت مورد نظر از دسترس خارج شود.
Margin های منفی چیزی نیست که شما همواره بتوانیداز آن استفاده کنیداما در برخی موارد مفید واقع می شوند. معمولا در هنگام ساخت ستون های layout می توان از آن استفاده مفید کرد. مطمئن باشید که از آن ها به صورت مکرر استفاده خواهید کرد.
Collapsed margins
دلایل اصلی برای collapsed margin ها برای بلاک های متنی است. پاراگراف های <p> به صورت پیش فرض 1em فاصله از بالا و 1em فاصله از پایین دارند که توسط استایل user againt ها اعمال می شود. اما هنگامی که دو پاراگراف را به هم می چسبانید یکی پس از دیگری فاصله بین آن ها 2em نمیشود به جای آن فاصله ها روی هم overlap می شوند و فاصله بین دو پاراگراف 1em می شود.
توجه ! در هنگام تداخل دو فاصله اندازه ای که انتخاب می شود برابر است با بزرگترین اندازه ای که به هم رسیده است.
عناصر نمی توانند هنگام collapse اندازه های خود را حفظ کنند. اگر شما یک پاراگراف را داخل یک div بیرونی قرار دهید (مطابق کد زیر) .نتیجه خروجی یکسان خواهد بود.
<main class="main">
<h2>Come join us!</h2>
<div>
<p>
The Franklin Running club meets at 6:00pm every Thursday
at the town square. Runs are three to five miles, at your
own pace.
</p>
</div>
</main>در این قطعه کد margin collapseهای متفاوتی رخ می دهد.margin پایینی h2 ، marginبالایی div و marginبالایی تگ p.
به صورت خلاصه هر margin بالا و پایین که مجاور هم باشند ، با یکدیگر collapse خواهند داشت. اگر شما با یک div بدون استایل را خالی اضافه کنید (بدون height , border , padding) با فاصله های بالا و پایین تداخل پیدا خواهد کرد.
توجه ! تداخل margin ها فقط در margin بالا و پایین رخ می دهد. margin چپ و راست تداخل ندارند.
تداخل margin ها همانند فضای بین انسان ها رفتار می کند.اگر دو نفر در یک ایستگاه اتوبوس ایستاده باشند و هر یک با دیگری 3متر فاصله داشته باشند در اصل فاصله آنها از هم کلا سه متر است .نیازی نیست که آن ها در فاصله شش متری نسبت به هم بیاستند.
این رفتار بدین معنی است که شما می توانید به عناصر خود استایل بدهید بدون توجه به اینکه در بالا یا پایین آن ها چه اتفاقی می افتد.
راه سوم برای اینکه margin های متوالی داشته باشید این است که گارد خود را بگیرید این جمله بدین معنی است که margin های یک عنصر از بیرون هم میتوانند تداخل داشته باشند.این تداخل می تواند نتیجه نا مطلوبی را ایجاد کند. margin ها معمولا در نقطه ای که شما مایل نیستید قرار می گیرند اما خوشبختانه راه هایی وجود دارد که این مشکل را حل کند. توجه داشته باشید که margin ها در flexbox دچار تداخل نمی شوند.
اگر شما padding بالا و پایین را به هدر خود اضافه کنید margin داخلی با بیرونی تداخل پیدا نخواهد کرد.در اینجا ابتدا کد هدر خود را مطابق کد زیر تغییر دهید. توجه داشته باشید که بین هدر و محتوای اصلی هیچ margin وجود ندارد.
header {
padding: 1em 1.5em;
color: #fff;
background-color: #0072b0;
border-radius: .5em;
}در اینجا راه هایی برای تداخل وجود دارد:
اگر overflow:outo یا هر مقدار دیگری به جز visible به container اعمال شود از تداخل margin بیرونی و داخلی جلوگیری میکند.
اضافه کردن border و padding مابین دو margin از تداخل آن ها جلوگیری می کند.
در container ای که ویژگی float آن فعال است margin ها تداخل پیدا نمی کنند.
استفاده از flexbox هم از تداخل margin ها جلوگیری می کند. این شرایط برای Grid layout هم وجود دارد که در آینده در مورد آن ها صحبت خواهیم کرد.
عناصری که با table-cell نمایش داده می شوند margin ندارند.پس در نتیجه تداخلی هم در آن ها رخ نخواهد داد.این ویژگی برای عناصر دارای table-row و سایر ویژگی های مرتبط با جدول هم رخ می دهد.به استثنای table-caption , table-inline , table
بسیاری از این تغییرات رفتارهای پیش فرض layout می باشد. اگر شما نمیخواهید این حالت ها رخ بدهد ادامه مطلب را نیز مطالعه کنید.
فاصله گذاری عناصر داخل container
فعل و انفعالاتی که بین padding یک container و margin محتوی آن رخ می دهد کمی پیچیده است. ابتدا تعدادی عنصر را به sidebar خوداضافه کنیم سپس مشکلاتی که رخ می دهد را بررسی کنیم. در پایان تکنیک های مفیدی که می تواند این مشکل را حل کند به شما آموزش خواهیم داد.
ابتدا دو دکمه که لینکی برای شبکه های مجازی می باشد را اضافه میکنیم.
سپس استایل های عمومی را به آن اعمال می کنیم . مثلا ویژگی block را اختصاص دهید تا عرض container را کاملا پر کند.
اکنون لینک ها به درستی اعمال شده اند اما شما بین عناصر فاصله زیادی دارید و این چیزی نیست که مدنظر ماست.شما در این جا راه حل هایی دارید: مثلا به عناصر به صورت مجزا margin بالا و پایین بدهید که تداخل بین این margin ها نتیجه مدنظر را به وجود بیاورد.
برای مواجهه با این مشکل این راه حل را امتحان کنید. Margin ها نیاز دارد که در پیوستگی با فاصله sidebar کار کند. اگر شما کد margin-top:1.5em; را اضافه کنید شرایط بهتر خواهد شد.
اکنون شما فاصله اضافی با بالا دارید.margin بالایی container اضافه شده است و این فاصله زیاد را ایجاد خواهد کرد.
این مشکل را با چند راه حل می توانید حل کنید، کد زیر را به کدهای خود اضافه کنید.
.button-link {
display: block;
padding: .5em;
color: #fff;
background-color: #0090C9;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.button-link + .button-link {
margin-top: 1.5em;
}با این کد فاصله از بالا حل می شود اما فاصله بین دکمه ها بیش از حد است.
دیدگاهتان را بنویسید