آموزش CSSآموزش طراحی سایت

جلسه ۳۹ – مفاهیم inline و block

آشنایی تکمیلی با inline و block

چه تگ هایی از نوع inline هستند ؟ چه تگ هایی از نوع block هستند ؟ چگونه تگ ها را از inline به block تبدیل کنیم؟ چگونه تگ ها را از block به inline تبدیل کنیم؟ inline چیست؟ block چیست؟ منظور از inline level و block level چیست؟

اولین و مهم ترین موضوع حائز اهمیت تو این فصل display یا نحوه نمایش، درک مفهوم نحوه نمایش inline و block هست. هرکدوم از عناصری که ما در صفحه خودمون استفاده می کنیم، یا inline هستن و یا block!

حالا اصلا اینا یعنی چی؟ قبل از هرچیزی مقاله inline level و block level در HTML را مطالعه کنید.

مفهوم block

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

به مثال زیر توجه کنین:

کد HTML:

<div> DIV 1 </div>
<div> DIV 2 </div>

نتیجه:

تعامل دو عنصر block

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

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

کد HTML:

<div class="div1"> DIV 1 </div>
<div class="div2"> DIV 2 </div>

کد CSS:

.div1{
   padding:5px;
   background-color:red;
}
.div2{
   padding:5px;
   background-color:blue;
}

نتیجه:

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

divها مهم ترین عناصر block هستن.

عناصر دیگه ای که دارای نحوه نمایش block هستن عبارتند از:

  • <p>
  • <h1> , <h2> , … <h6>
  • <ul> , <ol> , <dl> , <li>
  • <hr> , <blockquotes>
  • <address>
  • <pre>

اگه تو فهم مفاهیم، ابهامی براتون پیش اومد، حتما تو قسمت نظرات بپرسین تا با هم حلش کنیم 🙂

مفهوم inline

عناصر inline، نقطه مقابل عناصر block هستن. عناصری که یک خط رو برای خودشون اشغال نمی کنن، عناصر inline نام دارن. به این معنی که عناصر inline، بدون هیچ مشکلی در کنار هم قرار می گیرن.

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

به مثال زیر توجه کنین:

کد HTML:

<span class="span1"> SPAN 1 </span>
<span class="span2"> SPAN 2 </span>

کد CSS:

.span1{
   color:white;
   background-color:red;
   padding:5px;
}

.span2{
   color:white;
   background-color:blue;
   padding:5px;
}

نتیجه:

تعامل دو عنصر inline

spanها مهم ترین عناصر با نحوه نمایش inline هستن.

عناصر دیگهِ با نحوه نمایش inline عبارتند از:

  • <button>
  • <input>
  • <select>
  • <big> , <small>
  • <img>
  • <label>
  • <abbr>

عناصر inline، دو تفاوت اساسی دیگه با عناصر block دارن که یادگیری اون ها بسیار مهمه:

  • عناصر inline، خاصیت های width و height رو قبول نمی‌کنن.
  • عناصر inline، تنها padding‌ و margin چپ و راست رو می‌پذیرن. در جهات بالا و پایین به درستی عمل نمی‌کنن.

حالا برای حل کردن این مشکلات چی کار کنیم؟ تو مقاله خاصیت display در CSS با ما همراه باشین!

پایان ترم

سوال:

به کد های زیر و نتیجه اون ها دقت کنین:

<div class="parent">
   <div class="child">The child</div>
</div>
.parent{
   border:1px solid black;
   width:70%;
}

.child{
   background-color: indianred;
   color: white;
}

کوییز مقاله ۳۹

چرا با وجود این که عنصر div با کلاس child یک عنصر block به حساب میاد، تا انتهای صفحه نرفته؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله زبان css ، متوجه شدیم که هر عنصر در صفحه ما، می‌تونه inline و یا block باشه.

عناصر block، عناصری هستن که یک خط کامل رو برای خودشون اشغال می‌کنن.

در مقابل، عناصر inline رو داریم که می‌تونن بدون هیچ مشکلی در کنار هم قرار بگیرن و تنها محدوده خودشون رو اشغال می‌کنن.

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

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

‫4 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. داداش من یه div ایجاد کردم توش چند تا لینکه میخوام اینارو بزام راست صفحه بعد سمت چپ ضفحه تو همون خطی که div لینک ها هست یه چند input وselect قرار بدم ولی از لینک ها بگیر تا خود div رو inline کردم inlihe block هم کردم بازم کل خط رو اشغال کرده نمیذاره با استفاده margin اون input هارو توی لاین قرار بدم چه کار کنم؟

    1. ممکنه پدر اون div بلاگ باشه و inline نباشه. پدر تگ ها رو بررسی کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر