با عرض سلام خدمت کاربران سایت پی وی لرن . در آموزشهای مطالب قبلی ، در مورد مباحث کار با لیست ها و مدیریت لینک ها در html، توضیحاتی ارائه شد. در این بخش از آموزشهای html ، قصد داریم به مبحث آشنایی با ویژگی های Block و Inline در عناصر html ، بپردازیم. هر کدام از عناصر html دارای یک مقدار پیش فرض برای صفت display ، می باشد.
مقدار پیش فرض display ، برای اغلب عناصر html ، معمولا با Block یا Inline ، مقدار دهی می شود.
در ادامه این آموزش ، به بررسی هر کدام از ویژگی های Block و Inline ، در عناصر html ، می پردازیم.
ابتدا به بررسی و توضیح ویژگی Block ، در عناصر html می پردازیم:
ویژگی Block ، در عناصرhtml ، همیشه باعث می شوند که همیشه عنصر html، در خط جدیدی شروع شده و بیشترین عرض ( width ) قابل دسترس را اشغال کند. (و تا آنجا که ممکن است سمت چپ و راست را اشغال می کند).
مثال: تگ <div> ، از نمونه تگ های نوع Block ، است:
تگ هایی که دارای ویژگی پیش فرض block هستند:
عناصر html که از نوع inline ، هستند ، در یه خط جدید شروع شده و عرض ( width ) آن ها به اندازه ای که برای محتوای آن ها مورد نیاز است ، تنظیم می شود.
مثال: تگ <span> از نوع تگ هایی با ویژگی پیش فرض inline است:
تگ هایی که دارای ویژگی پیش فرض inline هستند:
در html ،تگ <div> ، معمولا به عنوان یک ظرف برای سایر عناصر استفاده می شود. تگ <div> ، به صفات احتایج ندارد، اما معمولا با ویژگی style ، class و id ، توصیف می شود.
زمانیکه از کد های css همراه با صفاتی که گفته شد، استفاده کنید ، محتوای تگ <div> ، نیز می تواند ویژگی block داشته باشد.
مثال:
1 2 3 4 | <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> |
عنصر <span> اغلب بعنوان یک ظرف برای برخی از متن ها استفاده می شود.
عنصر <span> دارای صفات مورد نیاز نیست، اما می توان از style، class و id استفاده کرد.
هنگامی که با CSS مورد استفاده قرار می گیرد، عنصر <span> می تواند برای style کردن قسمت های متن استفاده شود:
تگ | توضیحات |
---|---|
<div> | (block-level)یک بخش را در صفحه وب تعریف می کند |
<span> | یک بخش را در صفحه وب تعریف می کند(inline) |
تمام عناصر HTML که تاکنون ارائه شده عموما شامل یکی از ویژگی های Block و Inline در html می باشند، به طور خلاصه ویژگی block باعث اشغال حداکثر فضای عنصر والد و ویژگی Inline بلعکس عمل می کند.
Karim
Good