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ść.
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ć.
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.
Wygląda na to, że ma to być odpowiedź na jedną z pozostałych ośmiu odpowiedzi na to pytanie. Nie mogę jednak powiedzieć, który z nich.
Quentin
większość z nich. po prostu dodając do informacji.
EKanadily
0
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
Dziękuję za Twoją odpowiedź. Następnym razem sprawdź inne odpowiedzi, ponieważ nie dodaje to niczego nowego.
BluE
Szanowny Panie, odpowiedziałem na to pytanie w oparciu o wiedzę, którą znam, dlaczego miałbym zobaczyć inne odpowiedzi i zamieścić swoją odpowiedź, czy opublikowałeś ten komentarz każdemu, kto na to odpowiedział. To takie żenujące.
Odpowiedzi:
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
źródło
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;)
źródło
display: block
- podział wiersza przed i po elemenciedisplay: inline
- brak podziału wiersza przed lub po elemencieźródło
Oto tabela porównawcza:
Tutaj możesz zobaczyć przykłady.
źródło
display: block;
tworzy element na poziomie bloku , natomiastdisplay: 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
, ihr
HTML tagi.Niektóre przykłady elementów inline poziom to:
a
,span
,strong
,em
,b
, ii
HTML 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ć.
źródło
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/ .
źródło
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.
źródło
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
źródło
Dodaj kolor tła do elementu, a dobrze zobaczysz różnicę między wierszem a blokiem, jak wyjaśniono na innych plakatach.
źródło
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.
źródło
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; }
źródło
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.
źródło
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
źródło