Jaka jest różnica między blokiem a blokiem śródliniowym z szerokością: 100%?

Question

Niedawno próbowałem dowiedzieć się, kiedy należy użyć inline-block s. Wydają się znacznie bardziej przydatne niż element block. W rzeczywistości element typu inline-block wydaje się być w stanie zrobić wszystko, co może zrobić element blokowy, ale z odrobiną dodatkowej stylizacji.

Czy istnieje jakiś powód, dla którego element z display: inline-block; width: 100%; jest inny niż element z display: block;? (Pomijając fakt, że jest dłużej?)

Byłem bada ten temat czytając w3c recommendation. Nie mogę znaleźć różnicy.

Answer 1

Co pan powiedział jest dość dużo poprawne: „element inline-block wydaje się być w stanie nic zrobić element bloku może zrobić, ale przy odrobinie stylizacji.” Wynika to głównie z faktu, że łączy je jedno to, że oba są kontenerami blokowymi.

Jest jednak haczyk.

Pole blokowe bierze udział w kontekście formatowania bloków, a blok śródliniowy uczestniczy w kontekście formatowania wbudowanego (chociaż ustanawia kontekst formatowania blokowego dla jego potomków, tak jak blokuje pole pod pewnymi warunkami). Zobacz section 9.4. Zasadniczo oznacza to, że blok inline jest traktowany tak, jakby był tekstem, co z kolei oznacza, że ​​większość właściwości, które zwykle dotyczą tekstu, dotyczyłoby również bloku inline. Te właściwości obejmują między innymi text-indent, text-align i .

może to spowodować niepożądane skutki uboczne, które można łatwo zapobiec nie używając display: inline-block w pierwszej kolejności. Zobacz this question, aby zobaczyć interesujący przykład tego, co może się stać.

Model pudełkowy dla bloków śródliniowych również różni się nieco od pól blokowych. Section 10 zawiera wszystkie szczegółów i niuansów, ale główne różnice to:

• Bez deklaracji width: 100%, jak można podejrzewać, inline-block skurczy, aby dopasować jego zawartość.

• Ponieważ inline inline-block płynie, nie można wyśrodkować go auto lewy i prawy margines. Zamiast tego używasz text-align: center. Jest rzeczą oczywistą, że musi on znajdować się na osobnym wierszu bez tekstu otaczającego go na tej samej linii, ale jeśli ustawisz width: 100%, to nie będzie to problemem.

• Bloki wbudowane mają wartość nigdy nie są chronione przed pod wpływem margin collapse.

Jeśli próbujesz utworzyć układ blokowy, powinieneś używać display: block. Ogólnie biorąc, decydując się między tymi dwoma, powinieneś zawsze domyślnie ustawić na display: block i wybierać tylko display: inline-block, jeśli masz ku temu dobry powód (i nie, blokowanie zawężania marży nie jest tym, co uważam za dobry powód).

Answer 2

Powiedziałbym wszystko, co powiedział @BoltClock; on robi wiele dobrych punktów.

Dodam również, że ponieważ inline-block jest traktowany jako tekst, otaczająca biała przestrzeń jest również traktowana jako tekst i dlatego wchodzi w grę w taki sposób, że nie będzie dla elementu block. To często przyciąga ludzi, gdy próbują użyć układu inline-block. Jest to prawdopodobnie największa "gotcha" do korzystania z inline-block.

Kolejny nieco bardziej subtelny punkt dotyczy konkretnie w twoim przypadku, tj. Przy ustawieniu width:100%. W takim przypadku należy wystrzegać się modelu skrzynki, którego używasz, ponieważ standardowy model pudełkowy umieszcza twoje granice, marginesy i marginesy poza szerokością elementu. Zatem jeśli użyjesz obramowań, wypełnienia lub marginesu, twój element zajmie przestrzeń większą niż 100%.

Ten punkt odnosi się w równym stopniu do block i inline-block elementów, ale jest bardziej prawdopodobne ze inline-block ponieważ różnica jest taka, że ​​block zwykle nie muszą być ustawione na width:100% ponieważ domyślnie poszerzyć wypełnić szerokość tak, i bez modelu pudełkowego, który powoduje, że przesuwa się poza krawędź.

Aby tego uniknąć, można przełączyć model skrzynki za pomocą box-sizing:border-box, tak aby ramki itp. Zostały umieszczone wewnątrz pudełka, a tym samym, jeśli poprosisz o with:100%, dostaniesz to. Aby uzyskać więcej informacji, patrz MDN box-sizing page.