دو عنصر بسیار ساده ولی مهم عناصر inline و block-level می باشد که در عین سادگی نقش تعیین کننده ای در طراحی  دارد. همه طراحان با این عناصر کار می کنند ولی تعداد کمی می توانند از ویژگیهای آنها به نحو احسنت استفاده کنند .در این مقاله در ابتدا شما با این عناصر و  ویژگیهای آن آشنا می شوید و سپس با یک مثال کاربردی نحوه استفاده از آن را درک خواهید کرد...

دو عنصر بسیار ساده ولی مهم عناصر inline و block-level می باشد که در عین سادگی نقش تعیین کننده ای در طراحی  دارد. همه طراحان با این عناصر کار می کنند ولی تعداد کمی می توانند از ویژگیهای آنها به نحو احسنت استفاده کنند .در این مقاله در ابتدا شما با این عناصر و  ویژگیهای آن آشنا می شوید و سپس با یک مثال کاربردی نحوه استفاده از آن را درک خواهید کرد.

بعضی از برچسب های html باعث ایجاد شکستگی در خط می شوند یعنی هر عنصر که بعد از آن اضافه شود در یک خط بعد از آن قرار میگیرد و عناصر قبل از آن در یک خط بالاتر قرار می گیرند به این عناصر block-level می گویند . به مثال زیر دقت کنید

عنصرp یک عنصر بلوک است و در خط شکستگی ایجاد می کند و اگر در وسط یک پاراگراف  و برای یک متن اضافه شوند ، آ ن متن از بالا در یک خط جدید قرار می گیرد و متن پایین هم از یک سطر جدید آغازمیگردد

کد:

this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test <p>this is a test .this is a test .this is a test </p>this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .

نمایش در مرورگر :

this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test

this is a test .this is a test .this is a test

this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test .this is a test

ولی عناصر درون خطیinline) ) باعث شکستگی در خط نمی شوند .مثل برچسب b . استفاده از این برچسب برای نمایش فونت توپر  می باشد در هر کجای متن می باشد که بدون شکستگی در متن ایجاد می شود.

کد:

this is a test. <b>this is a test . </b>this is a test .this is a test .this is a test

نمایش :

this is a test. this is a test . this is a test .this is a test .this is a test

عناصر بلوک می توانند عناصر درون خطی را درون خود جا دهند و یا یک عنصر بلاکی دیگر را درون خود جای دهند .عناصر بلوک  کل عرض صفحه را اشغال می کنند مثل برچسب های div  h1  p  ul  ol ولی عناصر درون خطی فقط عرض عنصری که ان را در بر گرفته را اشغال می کند مثل برچسب هایa b

تا اینجا متوجه شدیم این عناصر چگونه روی صفحه ما اثر می گذارند ولی آیا می توان یک عنصر بلوک را به درون خطی تبدیل کرد و یا بلعکس واینکه ضرورت این کار چیست؟

به مثال زیر دقت کنید در این مثال یک متن لینک داده شده و از آنجایی که برچسب a یک عنصر ذاتا درن خطی می باشد  شکستگی در متن ایجاد نمی کند

کد :

this is a test.<a  href=”#” > this is a link </a> . this is a test .this is a test .this is a test

نمایش :

this is a test. this is a link . this is a test .this is a test .this is a test

ولی می توان این عنصر درون خطی را با دستورات css به عنصر بلوک  تبدیل  کرد

کد :

this is a test.<a  href=”#” class=” block”> this is a link </a> . this is a test .this is a test .this is a test

کد css :

a.block:link{

display: block

}

نمایش :

this is a test.

this is a link.

this is a test .this is a test .this is a test

با خصوصیت display می توان این  تبدیل را انجام داد . هم چنین برای تبدیل یک عنصر بوک به درون خطی از دستور

Display:inline استفاده می کنیم

یک مورد استفاده را از این تبدیل را بررسی می کنیم تا به ضرورت آگاهی از این قوانین پی ببریم :

فرض کنید یک منو با جدول ساخته اید( منوی اول فایل)

در هر سلول یک لینک قرار دارد ولی زمانی که ماوس را روی هر سلول می برید لینک عمل نمی کند یعنی حتما باید ماوس روی متن لینک داده شده برود تا لینک عمل کند.پس این یک طراحی غیر حرفه ای می باشد .شما باید زمانی که ماوس را روی  هر سلولی می برید لینک مربوطه فعال شود تا دسترسی به منوها محدود نباشد . برای این کار برای هر لینک که به طور پیش فرض حالت inline دارند ،را به حالت block-level تبدیل می کنیم تا لینک کل سلول جدول را شامل شود

http://htmlhelp.com/reference/html40/block.html