wyświetlanie: w tekście a wyświetlanie: blok [duplikat]

Jaka jest podstawowa różnica między następującymi arkuszami CSS:

display:inline

i to:

display:block

Używając ich osobno na elemencie, otrzymuję ten sam wynik.

display: block oznacza, że ​​element jest wyświetlany jako blok, tak jak zawsze były akapity i nagłówki. Blok ma kilka białych znaków nad i pod nim i nie toleruje żadnych elementów HTML obok niego, chyba że zamówiono inaczej (na przykład przez dodanie deklaracji float do innego elementu).

display: inline oznacza, że ​​element jest wyświetlany w wierszu, wewnątrz bieżącego bloku w tej samej linii. Dopiero gdy znajduje się między dwoma blokami, element tworzy „anonimowy blok”, który ma jednak najmniejszą możliwą szerokość.

Przeczytaj więcej o opcjach wyświetlania: http://www.quirksmode.org/css/display.html

Blok

Zajmuje pełną dostępną szerokość, z nową linią przed i po (display: block;)

Inline

Zajmuje tyle szerokości, ile potrzebuje i nie wymusza nowych linii (display: inline;)

display: block - podział wiersza przed i po elemencie

display: inline - brak podziału wiersza przed lub po elemencie

Oto tabela porównawcza:

Tutaj możesz zobaczyć przykłady.

display: block;tworzy element na poziomie bloku , natomiast display: inline;tworzy element na poziomie liniowym . Trochę trudno jest wyjaśnić różnicę, jeśli nie jesteś zaznajomiony z modelem CSS Box, ale wystarczy powiedzieć, że elementy blokowe przerywają przepływ dokumentu, podczas gdy elementy wbudowane nie.

Niektóre przykłady elementów poziomie bloku to: div, h1, p, i hrHTML tagi.

Niektóre przykłady elementów inline poziom to: a, span, strong, em, b, i iHTML tagi.

Osobiście lubię myśleć o elementach inline jako o elementach typograficznych elementach . Nie jest to całkowicie ani technicznie poprawne, ale w większości elementy wbudowane zachowują się bardzo podobnie do tekstu.

Możesz przeczytać więcej na ten temat tutaj . Biorąc pod uwagę, że zacytowało go kilka innych osób w tym wątku, warto przeczytać.

Wyświetlacz: blok zajmie całą linię, tj. Bez podziału wiersza

Wyświetlacz: inline zajmie tylko tyle miejsca, ile wymaga.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Możesz odnieść się do przykładu w tym skrzypcach http://jsfiddle.net/RJXZM/1/ .

elementy blokowe rozszerzają się, aby wypełnić ich rodzica.

elementy inline kurczą się tak, aby były wystarczająco duże, aby pomieścić ich dzieci.

Blok wyświetlacza

zajmuje cały wiersz (100%) ekranu, zawsze stanowi 100% rozmiaru ekranu

przykład bloku wyświetlacza

wyświetlacz: blok inline zajmuje tyle szerokości, ile potrzeba, może wynosić od 1% do 100% rozmiaru ekranu

wyświetl przykład bloku inline

dlatego mamy div i span

Domyślny styl DIV to display block: zajmuje całą szerokość ekranu

span domyślnym stylem jest display: inline block: span nie zaczyna się w nowej linii i zajmuje tyle szerokości, ile potrzeba

Dodaj kolor tła do elementu, a dobrze zobaczysz różnicę między wierszem a blokiem, jak wyjaśniono na innych plakatach.

Display: block Zachowuje się tak samo jak znaczniki „p” i zajmuje cały wiersz, a obok niego nie może znajdować się żaden element, dopóki nie zostanie zmieniony. Wyświetlacz: wbudowany Zajmuje po prostu tyle miejsca, ile potrzeba i pozwala na wyrównanie innych elementów obok siebie.

Skorzystaj z tych właściwości w przypadku formularzy, a lepiej zrozumiesz.

blok lub blok inline może mieć szerokość (np. width: 400px), podczas gdy szerokość nie wpływa na element inline. element inline może rozciągać się do następnej linii tekstu (przykład http://codepen.io/huijing/pen/PNMxXL zmień rozmiar okna przeglądarki, aby to zobaczyć), podczas gdy element bloku nie może.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Block Elements : Elementy lubiane div, p, headings są na poziomie bloku. Zaczynają od nowej linii i zajmują pełną szerokość elementu nadrzędnego. Elementy wbudowane: Elementy lubiane b, i, span, img są na poziomie wbudowanym. Nigdy nie zaczynają od nowej linii i zajmują szerokość treści.

Domyślnie elementy wbudowane nie wymuszają rozpoczynania nowego wiersza w przepływie dokumentu. Z drugiej strony elementy blokowe zwykle powodują przerwanie linii, możesz odnieść się do tego łącza