Ostatnio edytowany:

div

Autor: Virtual Patriot

Przeznaczenie elementu div

Element div reprezentuje swoje elementy dzieci reprezentowane przez zawartość opływającą.

Element div może zostać wykorzystany przez nas w sytuacji gdy musimy z jakiegoś powodu umieścić interesującą nas zawartość opływającą w zawartości dodatkowego elementu HTML, a jednocześnie nie chcemy, aby wybrany przez nas do tego celu element HTML posiadał z góry narzucone dodatkowe znaczenie, od którego musiałaby być uzależniona wspomniana zawartość opływającą.

Dodatkowe techniczne informacje o elemencie div

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst opływający

    Przykładowy Kod HTML

    <body>
      <h1>Rzeczowy blog o rzeczach</h1>
    
      <main>
        <article>
          <h2>Mój ulubiony owoc</h2>
          <p>Moim ulubionym owocem jest czereśnia.</p>
        </article>
    
        <div class="styl">
          <article>
            <h2>Moje ulubione zwierzę</h2>
            <p>Moim ulubionym zwierzęciem jest lew.</p>
          </article>
    
          <article>
            <h2>Mój ulubiony kwiat</h2>
            <p>Moim ulubionym kwiatem jest róża.</p>
          </article>
        </div>
      </main>
    </body>

    Kontekstem zewnętrznym przykładowego elementu "div" jest element "main". Wspomniany element "main" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "main", jest prawidłowym kontekstem zewnętrznym dla elementu "div".

kontekst wewnętrzny
  • zawartość opływająca

    Przykładowy Kod HTML

    <body>
      <h1>Rzeczowy blog o rzeczach</h1>
    
      <main>
        <article>
          <h2>Mój ulubiony owoc</h2>
          <p>Moim ulubionym owocem jest czereśnia.</p>
        </article>
    
        <div class="styl">
          <article>
            <h2>Moje ulubione zwierzę</h2>
            <p>Moim ulubionym zwierzęciem jest lew.</p>
          </article>
    
          <article>
            <h2>Mój ulubiony kwiat</h2>
            <p>Moim ulubionym kwiatem jest róża.</p>
          </article>
        </div>
      </main>
    </body>

    Kontekstem wewnętrznym przykładowego elementu "div" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "article" oraz element "article", jest prawidłowym kontekstem wewnętrznym dla elementu "div".

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <div> ... </div>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • block

Dodatkowe domyślne reguły CSS elementu div

div {
  display:block;
}

Interpretacja elementu div

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak