تگ های block-level و inline-level

در این بخش از آموزش طراحی سایت به آموزش عناصر بلاک (Block) و اینلاین (Inline) می پردازیم.

تگ های block-level و inline-level

هر عنصر HTML یک مقدار نمایش پیش فرض بسته به اینکه چه نوعی از عنصر می باشد دارد. بصورت کلی دو مقدار نمایش وجود دارد: بلاک (block) و اینلاین (inline).

عنصر های نوع بلاک (block)

یک عنصر نوع بلاک همیشه در یک خط جدید شروع می شود و تمام عرض خط موجود را به خود اختصاص می دهد.

عنصر <div> یک عنصر بلاک است.

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


که نتیجه کد بالا به شکل زیر خواهد بود. مشاهده می فرمایید که عنصر div تمام عرض صفحه را به خود اختصاص داده است و اجازه قرارگیری عنصر دیگری را در همسایگی خود نمی دهد.

آموزش html


عنصرهای نوع بلاک در HTML

آموزش html


عنصرهای Inline

آموزش html


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

مثال :

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


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

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


عنصرهای inline در HTML:

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


عنصر <div>

عنصر <div> یکی از پرکاربردترین عناصر در طراحی سایت و صفحات وب است. این عنصر اغلب بعنوان یک فضا برای بقیه عناصر HTML استفاده می شود.

عنصر <div> هیچ ویژگی ای را نیاز ندارد، اما معمولا در آن از style، class و id استفاده می شوند. وقتی عنصر <div> با استایل های CSS ترکیب شوند، از آنها می توان برای استایل دادن به محتوا درون عنصر div استفاده کرد:

آموزش html


که نتیجه کد بالا به شکل زیر خواهد بود:

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


عنصر <span>

عنصر <span> نیز یکی دیگر از عناصر پرکاربرد در طراحی سایت است. این عنصر یک فضای inline برای مارک کردن یک قسمتی از متن یا سند می باشد. عنصر <span> هیچ ویژگی خاصی نیاز ندارد، اما معمولا از style، class و id در آن استفاده می شود.

وقتی عنصر <span>  با CSS ترکیب شود، می تواند برای استایل دادن به محتوا استفاده شود:

آموزش html


که نتیجه کد بالا به شکل زیر است:

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

آموزش طراحی سایت آموزش HTML آموزش CSS آموزش عناصر بلاک و اینلاین دوره آموزش طراحی سایت