کانال تلگرام
آموزش حذف کردن فاصله بین عناصر inline-block با HTML

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

در این آموزش شما یاد خواهید گرفت که چگونه این فاصله ها را حدف کنید.

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

 

block one block two block three

 

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

 

<style>
#block { text-align: center }
.inline {
background: red; color: white;
display: inline-block;
width:100px;
}
</style>
<div id=”block”>
<span class=”inline”> block one </span>
<span class=”inline”> block two </span>
<span class=”inline”> block three </span>
</div>

 

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

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

 

روش اول : نوشتن تمامی عناصر در یک خط !

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

بدین صورت:

 

<div id=”block”>
<span class=”inline”> block one </span><span class=”inline”> block two </span><span class=”inline”> block three </span>
</div>

* همین طور که در کدبالا مشاهده می‌کنید هیچ فاصله ای بین عناصر <span> داده نشده.

 

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

اما در روش های دوم و سوم این مشکل وجود نداره.

 

روش دوم :

آخرین علامت هر خط را در شروع خط بعدی قرار دهید.
اگر متوجه منظورم نشدید به کد زیر نگاه :

 

<div id=”block”>
<span class=”inline”> block one </span
><span class=”inline”> block two </span
><span class=”inline”> block three </span>
</div>

 

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

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

 

روش سوم : استفاده از کامنت ها

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

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

 

<div id=”block”>
<span class=”inline”> block one </span><!–
–><span class=”inline”> block two </span><!–
–><span class=”inline”> block three </span>
</div>

 

همین جور که مشاهده کردید در آخر هر خط بعد از عناصر از <!-- (علامت آغاز کامنت در html) استفاده شده و در ابتدای خط بعدی از --> (علامت پایان کامنت در html) استفاده شده.

 

نتیجه :

پیش نمایش کد سه روش بالا به این صورت می شود.

 

block one block two block three

* با استفاده از هر سه روش می‌توانید فاصله های پیش فرض را از بین ببرید.

 

پایان آموزش.

خب آموزش به پایان رسید، امیدوارم که بهترین استفاده رو از این آموزش برده باشید. منتظر آموزش های بعدی ما هم باشید…

اگر سوالی داشتید در قسمت دیدگاه ها مطرح کنید، اگر هم سوالی نداشتید خوش حال میشیم که نظرات شما رو ببینیم. :))

 

هرگونه کپی برداری ممنوع است.

نوشته شده در : جمعه 10 نوامبر 2017
  • نوشته ها : 8
    برنامه نویس و توسعه دهنده وب
    باسلام و درود فراوان به شما عزیزان. ابوالفضل مهرورز هستم مدیر و نویسنده سایت اینگونه. تخصصم در زمینه برنامه نویسی و توسعه ی وب هست کمی هم در زمینه گرافیک و طراحی مهارت دارم. از سال 1394 شروع به یاد گیری برنامه نویسی و طراحی کردم.
    آخرین نوشته های Abolfazl Mehrvarz
    برای با خبر شدن از جدیدترین ارسالی های سایت در کانال تلگرام ما عضو شوید.JOIN CHANNEL
    ارسال دیدگاه
    You can use the HTML tags.

    No comment.