تفاوت المان inline و block | تگ span
با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در این جلسه می خواهیم با دو مفهوم مهم inline و block آشنا شویم. این دو مفهوم به نحوه نمایش المان ها در حالت پیش فرض مربوط می شود. در حین آموزش امروز با تگ span در html که خیلی ساده و پرکاربرد می باشد هم آشنا خواهیم شد. بی مقدمه بحث امروز رو شروع می کنیم.
در آموزش زیر به سوالات زیر پاسخ می دهیم:
- مفاهیم inline و block چیست؟
- تفاوت المان inline و block چیست؟
- تگ span چیست؟
- و…
با ما همراه باشین ;-)
تفاوت المان inline و block
هر المانی در html به صورت پیش فرض دو حالت نمایش دارد :
- Inline (درون خطی)
- block (بلاک)
نوع نمایش Block
تمام المان هایی که در حالت پیش فرضشان به اندازه عنصر والدشان رشد می کنند از نوع block هستند. به بیان ساده تر المانی نوع نمایش block دارد که در نتیجه مرورگر تمام عرض محدوده نگهدارنده (مرورگر یا المان والد) خود را از چپ و راست پوشش می دهند و المانهای بعد خود را به خط بعد هدایت می کند. حتی حتی حتی اگر به این المان ها عرض (width) هم بدهیم باز هم تمام عرض محدوده نگهدارنده خودشان را فرا می گیرند.
از المان هایی که تا به حال درس دادیم المان های <p> ،<ul> ،<div>،<h6>…<h1> ،<ol> از نوع block هستند.
خب وقتشه که یک مثال بزنیم.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html dir="rtl"> <head> <style> *{ margin:0; padding:0; border:0; box-sizing: border-box; } .one{ width: 400px; height: 70px; background: #EA384D; } .two{ width: 300px; height: 110px; background: #2980b9; } .three{ height: 100px; background: #F9D423; } </style> </head> <body> <div class="one">تگ div از نوع block می باشد</div> <div class="two"><h4> تگ h1 تا h6 هم از نوع block می باشند</h4></div> <div class="three"> <div class="one">به حالت نمایش تگ پاراگراف توجه کنید:<p style="border: 1px solid black; background:#FFF;">تگ پاراگراف از نوع block می باشد</p>همانطور که می بینید به خط بعد رفت</div> </div> </body> </html> |
توضیح:
کد بالا خیلی راحت است و المان ها و استایل هایی است که تا به حال درس داده ایم فقط خلاصه اینکه سه تا div داریم که خاصیت عرض را برای div اول و دوم مشخص کردیم . داخل div دوم یک تگ h4 تعریف کردیم حالا می خواهیم نوع نمایش این المان ها را در مرورگر ببینیم.
نتیجه:
همانطور که در مرورگر نمایش می دهد:
هر div ای در یک خط به صورت تمام عرض قرار گرفته است مثلا div اول تمام عرض مرورگر را گرفته و div دوم به خط بعدی هدایت شده است .حتی با تعریف خاصیت width:400px برای div اول باز هم تمام عرض والدش که مرورگر می باشد را گرفته است. می توانیم از طریق inspect element محدوده هر المان را مشاهده کنید. پس div خاصیت block دارد. المان h4 و p هم در شکل زیر بررسی شده و همانطور که مشخص است هر کدام تمام عرض عنصر والد خود را گرفته اند.
نوع نمایش inline
المان inline درست عکس block می باشد. المان ها با خاصیت inline فقط به اندازه ای که نیاز دارند ، عرض المان والد خود را می گیرند و المانهای بعدی در صورتی که از همین نوع باشند در ادامه این المان قرار می گیرند و به خط بعد هدایت نمی شوند. نکته جالب این است که حتی حتی حتی دادن width و height روی این نوع المان ها هیچ تاثیری نخواهند داشت.
المان های <img> ،<a>،<span>، <b>، <br> از نوع inline هستند. قبل از اینکه سراغ مثال برای نمایش inline برویم خواهیم گفت تگ span چیست؟
تگ span چیست؟
این تگ به خودی خودی کار خاصی انجام نمی دهد و هر چه بین این تگ نوشته شود بدون هیچ تغییری در مرورگر نمایش داده می شود فقط با استفاده از تگ span می توانیم یک قسمت از متن را استایل خاصی بدهیم همین! این تگ از نوع inline می باشد.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html dir="rtl"> <head> <style> *{ margin: 0; padding: 0; border: 0; box-sizing: border-box; } span{ width:1000px; height:100px; } a{ width: 99px; color: #2980b9; text-decoration: none; } p{ width: 50%; color: #2980b9; font-size: 20px; } .one{ width: 100px; height: 100px; border:2px solid #000; } .one-s{ height: 100000px; color: #E91E63; font-size: 18px; } .two{ width: 99%; height: 110px; background: #34495e; } .one a{ background:yellow; } .two a{ color:#a350fe; border:1px solid #fefefe; font-size: 22px; } .two-s{ font-size:20px; color:#fe7564; } </style> </head> <body> <h4 class="one"> آیا می دانید که <span class="one-s"> تگ span </span> از نوع <a href=""> inline </a> می باشد </h4> <div class="two"> <p>تگ p از نوع block می باشد بنابراین تمام عرض والد خود را پوشش داده و المان های بعد را به خط بعد هدایت کرده است منتهی عرض آن را 50 درصد در نظر گرفتیم</p> <img src="logo.png" alt="" title="تگ img هم inline است"> <a href="https://dazhyarco.net">تگ a از نوع inline می باشد پس فقط به اندازه نیازش رشد می کند.</a> <span class="two-s">تگ span و a و img و تمامی تگ های inline خاصیت width و height نمیپذیرند.</span> </div> </div> </body> </html> |
توضیح:
پیشنهاد می کنم این کد رو خودتون بزنید تا دقیقا متوجه نحوه استفاده از المان ها و استایل ها شوید. در مثال بالا یک تگ div و یک تگ h4 با کلاس one و two تعریف کردیم، داخل هر کدام، از تگ هایی با نمایش inline و block استفاده شده تا تفاوت این دو نوع نمایش عیان تر باشد. در این مثال عمدا به المان inline عرض و ارتفاع (width و height) دادیم تا در نتیجه ببینید که این عرض و ارتفاع ها هیچ تاثیری روی المان ها inline ندارند.
نکته: margin و padding روی المان های inline تاثیر گذارند ولی فقط در راستای افقی عناصر را هول می دهند نه عمودی.(در آموزش جلسه بعد برای این نکته مثال می زنیم)
نکته: در این مثال برای دادن استایل های متفاوت به هر کدام از تگ های a در div های one و two از سلکتور “نام کلاس والد + نام المان” استفاده کردیم.
نتیجه:
همانطور که در مرورگر نمایش می دهد:
تگ p ، div ، h که از نوع block هستند بنابراین به اندازه والد خود رشد می کنند و عرض و ارتفاع (width و height) روی این المان ها موثر است اما تگ a، img،span چون از نوع inline می باشند فقط به اندازه محتوای خود رشد کرده و خاصیت عرض و ارتفاع (width و height) روی آن ها موثر نیست.
از این لینک می توانید اطلاعات دقیق تری به دست بیاورید و با تمام المان های inline و block آشنا شوید.
در واقع این جلسه پیش زمینه ای برای آموزش جلسه بعد بود، در جلسه بعد می خواهیم به یک خاصیت مهم به نام display در css بپردازیم که می تواند نحوه نمایش المان ها در صفحات وب را تغییر دهد مثلا می توانیم کاری کنیم که المان های inline بتوانند عرض و ارتفاع بگیرند و …
آموزش این جلسه به پایان رسید. امیدوارم با المان inline و block به خوبی آشنا شده باشید چون در جلسه بعد به تسلط کافی روی مبحث امروز نیاز داریم.
خلاصه جلسه امروز به شرح زیر می باشد:
تگ | ||||||
نام | توضیح | |||||
span | بدون هیچ تغییری متن را اضافه می کند . فقط برای استایل دهی به قسمتی از متن به کار می رود | |||||
انواع نمایش المان ها | ||||||
block | تمام عرض والد خود را پوشش می دهد | |||||
inline | فقط به اندازه نمایش محتوای خود عرض والد را پوشش می دهد |
باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)به این مقاله چند تا ستاره میدی؟[تعداد رای: 2 امتیاز: 5]
سلام از جلسه دوازدهم به بعد خيلي پيچيده و نا مفهوم توضيح دادي مخصوصا از جلسه چهاردم که من هيچي نفهميدم اين موضوعات Block/Inline و روش هاي نمايش دادن اون در مرورگر من که هيچي متوجه نشدم ضمنا اين که مثال هايي که به صورت کد زدي رو خيلي شلوغ و نا مفهوم مثال زدي من تصميم دارم طراحي سايت ياد بگيرم ولي با اين جور توضيح دادن بدتر گيج ميشم اگر ميشه يکم واضح تر و با مفهوم تر توضيح بده
سلام و احترام
دوست عزیز حق باشماست نظر شما را به همکاران منتقل می کنیم. ولی به صورت کلی موضوع block/inline نسبت به مباحث قبلی کمی پیچیده هست . بهتراست این مفهوم را از طریق فیلم های آموزشی موجود در اینترنت کار کنید.
با تشکر از همراهی شما