MohirDox

Ko'rinishi

HTML Block va Inline elementlar ​

Har bir HTML elementining standart display qiymati bor, bu element turiga bog'liq. Eng keng tarqalgan ikki display qiymati: block va inline.

Block darajasidagi elementlar ​

Block darajasidagi element har doim yangi qatordan boshlanadi, va brauzer elementdan oldin va keyin avtomatik ravishda baʻzi boʻsh joy (margin) qoʻshadi.

Block darajasidagi element mavjud boʻlgan toʻliq kenglikni egallaydi (chap va oʻngga iloji boricha choʻziladi).

Eng koʻp ishlatiladigan block elementlarga misollar: <p> va <div>.

-- <p> elementi HTML hujjatida paragrafni belgilaydi. -- <div> elementi HTML hujjatida boʻlim yoki qismni belgilaydi.

The <p> element is a block-level element.
The <div> element is a block-level element.

Misol:

html
<p>Hello World</p>
<div>Hello World</div>

HTMLdagi block darajasidagi 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 elementlar ​

Inline element yangi qatorda boshlanmaydi.

Inline element faqat kerakli miqdordagi kenglikni egallaydi.

Bu paragraf ichidagi a <span> elementi misolidir.

Misol:

html
<span>Hello World</span>

HTMLdagi 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>

Note

Inline element blok darajasidagi elementni oʻz ichiga ololmaydi!

<div> elementi ​

<div> elementi koʻpincha boshqa HTML elementlari uchun konteyner sifatida ishlatiladi.

<div> elementining majburiy attributlari yoʻq, lekin style, class va id keng tarqalgan.

CSS bilan birgalikda ishlatilganda, <div> element kontent bloklarini uslublash uchun ishlatilishi mumkin:

Misol:

html
<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div> elementi haqida keyingi bobda batafsilroq oʻrganasiz: next chapter.

<span> elementi ​

<span> elementi matnning bir qismini yoki hujjatning bir boʻlagini belgilash uchun ishlatiladigan inline konteynerdir.

<span> elementining majburiy attributlari yoʻq, lekin style, class va id keng qoʻllanadi.

CSS bilan birga ishlatilganda, <span> element matnning kichik qismlarini uslublash uchun ishlatiladi:

Misol:

html
<p>
  My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes 
  and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.
</p>

Bob xulosasi ​

-- Block darajasidagi element har doim yangi qatorda boshlanadi va mavjud boʻlgan toʻliq kenglikni egallaydi. -- Inline element yangi qatorda boshlanmaydi va faqat kerakli miqdordagi kenglikni egallaydi. -- <div> elementi block darajasidagi element boʻlib, koʻpincha boshqa HTML elementlari uchun konteyner sifatida ishlatiladi. -- <span> elementi matnning yoki hujjatning bir qismini belgilash uchun ishlatiladigan inline konteynerdir.

HTML teglari ​

TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)

TIP

Toʻliq HTML teglari roʻyxati uchun, bizning HTML Tag Reference sahifamizga oʻting.