دوره زبان تخصصی برای برنامه‌نویسان (هدیه ویژه ثبت‌نام در دوره‌های متخصص) (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ Golgoli
Display:inline-block
جامعه Html & CSS ایجاد شده در ۱۶ شهریور ۱۴۰۲

سلام به همگی دوستان .با سرچی که کردم میخوام به نکته این جلسه اشاره کنم.

همان طور که قبلا گفته شد ;display:block حالتی هست که عنصر ما عرض تمام صفحه را پر میکند 100 درصد عرض صفحه ما را پر می‌کند و عنصر بعدی اگر بخواد در کد بعدش قرار بگیرد چه عنصر بلاکی باشد چه span به خط بعد می‌رود و عناصر کنارش نمی‌توانند در کنار عنصر بلاکی قرار بگیرند. در عناصر بلاکی مانند div می‌توانیم طول و عرض دلخواه را به عنصر مورد نظرمان اعمال کنیم و همچنین مارجین و پدینگ بالا و پایین هم می‌تواینم به عنصر مان بدهیم که صد البته اعمال می‌شود. در عناصری که ;display: inline دارند، مانند تگ span تمام عرض صفحه را پر نمی‌کنند و به انداه محتوایشان جا می‌گیرند. عناصر span کنار یکدیگر قرار می‌گیرند و همچنین عناصر بلاکی بعد از آن‌ها و در خط بعد قرار می‌گیرند. اگر به عناصر مانند span که display آنها به صورت پیش فرض روی حالت inline هست طول و عرض را مقداردهی کنیم عناصر span این مقادیر را نیمتوانند بگیرند و مارجین و پدینگ بالا و پایین هم نمیگیرند. حال یک حالت دیگر به نام ;display : inline-block داریم که در این حالت وقتی به عناصر موردنظرمان میدهیم چه span و چه block به صورت پیش فرض اندازه محتوایشان فضا را اشغال می‌کنند و هم اینکه می‌توانیم طول و عرض بدهیم به عنصر و آن را به اندازه دلخواه خودمان در آوریم. مارجین و پدینگ بالا و پایین روی آن اعمال می‌شود و عناصر مانند تگ span کنار یکدیگر قرار می‌گیرند .

امیدوارم که نوشته هام درست باشه و براتون مفید واقع باشه.

کاملا درسته من یه جایی توی سوالات دیدم یا یه سایتی بود که در حالت inline مارجین و پدینگ بالا پایین نمیگیره 

تست کردم پدینگ رو گرفت ولی تو مارجین بالا پایین اعمال نشد حالا نمیدونم چطوریاس

Sina Tabatabaei ۲۶ آبان ۱۴۰۲، ۱۵:۳۱