Block and Inline

Block so'zini  block yoki  bitta qator   deb tarjima qilsak bo'ladi.

Inline  so'zini  bitta qatorda  deb tarjima qilsak bo'ladi.

Html da har qanday  elementning   display  xususiyati bo'ladi va  default holatda  display xususiyatining qiymati   block   yoki   Inline   qiymatda bo'ladi. Css orqali bu qiymatlarni o'zgartirsak bo'ladi.

Display so'zini ko'rsatish deb tarjima qilsak bo'ladi.

Dehqonchasiga aytadigan bo'lsam:  Html da elementlar 2ta guruhga bo'linadi  Block va Inline  guruhlariga.

Block Elements  

Block  elementlar har doim yangi qatordan  chiqadi.  Ya'ni block elementi bitta o'zi bitta qatorda bo'lsam deydi (zixna da). Boshqa elementlarni boshqa qatorlarga surivorib bitta o'zi bitta qatorda bo'lishga harakar qiladi.

Shu bilan bitta shu qatorda bor bo'lgan width (kenglik) ni olishga harakat qiladi.

Namuna

<div>Salom  Bu Block element</div> <p>Bu xam Block element</p> 
<h4>Va bu xam</h4> <p>Block elementlar har bittasi alohida bitta qatorda chiqadi</p>

Natija

Ahamiyat bering. Namunada 4ta Html elementi berilgan ular 2ta qatorga yozilgan ammo  div bilan p elementi  bitta qatorga yozilgan ammo natijada ular alohida qatorlarga chiqdi sababi ular ikkalasi ham block element hisoblanadi va ular yangi qatordan bitta o'zi chiqishga harakat qiladi. h4 bilan p elementida ham shu.

Natijada 4ta qatorda yozuv chiqdi 4ta element ham block element va ularni har biri yangi qatordan joy olishga harakat qiladi va bitta qatorda bitta o'zi chiqadi.

Block elementi bor bo'lgan width (kenglikni) olishga harakat qiladi.

Namuna

<div style="border: 1px solid black">Salom  dunyo</div>

<p>DIV elementi blok elementi bo'lib, u har doim yangi satrda boshlanib, mavjud bo'lgan to'liq kenglikni oladi (imkon qadar chapga va o'ngga cho'ziladi).</p>

Natija

Salom dunyo

DIV elementi blok elementi bo'lib, u har doim yangi satrda boshlanib, mavjud bo'lgan to'liq kenglikni oladi (imkon qadar chapga va o'ngga cho'ziladi).

Div elementiga chegara yozildi (kenligini ko'rish uchun)  va u to'liq qatorni egallab oldi.

Block elementlar ro'yxati.

<address> ,  <article>  ,    <aside>  ,   <blockquote>  ,   <canvas>  ,   <dd>  ,   <div>  ,   <dl>   ,  <dt>  ,   <fieldset> , <figcaption> ,    <figure> ,    <footer> ,    <form> ,   <h1>-<h6> ,    <header> ,   <hr> ,   <li> ,   <main> ,   <nav>, 
<noscript> ,   <ol> ,   <p>,    <pre> ,   <section> ,   <table>,    <tfoot> ,   <ul> ,   <video>.

Inline Element

Inline ementlar yangi qatordan boshlab chiqishga harakat qilmaydi. Bitta o'zim bo'lay demaydi (pass beradi) (jmot emas.) 

Inline elementi o'ziga kerakli bo'lgan width (kenglik) ni olishga harakat qiladi. 

Bir qatorda bir nechta inline elementlar bo'lishi mumkin.

Namuna

<span style="border: 1px solid black">Salom dunyo 1</span> 
<span style="border: 1px solid black">Qalaysizlar</span> 
<span style="border: 1px solid black">Jallimi</span> 

Namuna

Salom dunyo 1 Qalaysizlar Jallimi

Span elementi inline elementi hisoblanadi.

Namunada 3ta inline lement berilgan. Ahamiyat bering ular barchasi bitta qatorga chiqdi. Inline element o'ziga kerakli width (kenglik) ni olsa bo'ldi qolgani bilan ishi yo'q. 

Shu sababdan bitta qatorda bir nechta inline element  chiqarsak bo'ladi.

Eslatma. Inline lementni ichida block element yozish mumkin emas. Masalan span elementini ichida div elementni yozish yaxshi emas.

Inline elementlar ro'yxati.

<a>,    <abbr> ,   <acronym>,    <b> ,   <bdo>,    <big>,    <br>,    <button>,    <cite>,    <code>, <dfn>,     <em>,    <i>,    <img>,    <input>,    <kbd>,    <label>,    <map>,    <object>,    <output>, <q> ,   <samp>,    <script>,    <select> ,   <small>,    <span>,    <strong>,    <sub>,    <sup>,    <textarea>, <time>,    <tt>,    <var>,

 <div>  Elementi

Html da div elementi juda ko'p ishlatiladigan elementlardan biri. Asosan blocklarni yoki boshqa bir elementlarni ushlab turish uchun ishlatiladi.

div elementi block elementi. Ammo uni  display xususiyati orqali uni inline lementga o'zgartirsak bo'ladi. Bu haqida Css darslarda to'liq tushintiriladi. 

div elementiga namuna

<div style="background-color:indianred; color:white;padding:20px;">
  <h2>Block Nomi</h2>
  <p>Shu blockdagi qandaydir tekslar</p>
  <p>Bu boshqa bir teks</p>
</div> 

Natija

Block Nomi

Shu blockdagi qandaydir tekslar

Bu boshqa bir teks

<span>  Elementi

span elementi inline elementi va u o'ziga kerakli width (kenglik) ni oladi xolos.

span elementi tekslar bir qismini ajratib ko'rsatish uchun ishlatiladi. Undan tashqari  Css bilan  span elementi  birgalikda  ishlatish xolatlari ko'p.

Namuna

<p>Qandaydir teks<span style="color:blue;font-weight:bold">Ko'k rangda</span> va uning davomi <span style="color:green;font-weight:bold">yashil</span> rangda.</p>

Natija

Qandaydir teks Ko'k rangda va uning davomi yashil rangda.

Mavzu yakuni bo'yicha

• Elementlar ikkita turga bo'linadi: Block va Inline
• Blok elementlar  element har doim yangi qatordan  boshlanadi va mavjud bo'lgan to'liq kenglikni oladi.
• Inline elementlar  yangi satrda boshlanmaydi va u o'ziga kerakli  kenglikni oladi.
• <div> elementi  ko'pincha boshqa HTML elementlari uchun idish sifatida ishlatiladi. Ya'ni ularni ushlab turish uchun ishlatiladi. Konteyner ga o'xshab.
• <span> elementi  teks yoki hujjatning bir qismini belgilash uchun ishlatiladigan  kichkina konteyner.