عناصر Block and Inline

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

هر عنصر 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  میباشد. این تگ بیشتر در بخش بندی(layout) صفحه وب کاربرد دارد.

عنصر 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


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

We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.