عناصر Block and Inline

h2

 عناصر درون خطی و بلاک

هر عنصر html دارای یک مقدار پیش فرض برای نمایش است که نوع آن را مشخص میکند. این دو نوع  مقدار پیش فرض نمایش ، block و inline هستند.

Block-level Elements

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

 

:مانند

<h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>

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

مانند:

<b>, <a>, <strong>, <img>, <input>, <em>, <span>

عنصر div و span

عنصر div یک عنصر block است، به عنوان ظرفی که حاوی دیگر عناصر html  میباشد. این تگ بیشتر در بخش بندی صفحه وب کاربرد دارد.

عنصر span یک عصر  inline میباشد. به عنوان ظرفی که حاوی متن میباشد.

تفاوت این دو  تگ را در مثال زیر بررسی میکنیم:

 <!DOCTYPE html>
<html>
<head>
<title> div & span </title>
</head>
<body>

<div style="color:red">
 <h4>This is first group</h4>
 </div>
<div style="color:green">
 <h4>This is second group</h4>
</div>
<p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p>
</body>
</html>

lk

 <html>
<head>
<title> Div&span</title>
</head>
 <body>
 <h1>Div&span</h1>
 <div style="background-color:green; color:white; padding:20px;">
 <h2>Some 
 <span style="color:red">Important</span>
 Message</h2>
 <p>Some paragraph text goes here.</p>
 <p>Another paragraph goes here.</p>
 </div>
 </body>
</html>

Untitkkkled

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

مهارت ها: html,css C#, sql,python

نوشته های مرتبط

نظری بگذارید

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