Blok inline CSS

Każdy element HTML jest traktowany jak pudełko w przeglądarce internetowej. Dlatego ich wyświetlacz w przeglądarce internetowej ma duże znaczenie i wpływa na układ. Jednak CSS oferuje dwa rodzaje pudełek, wbudowane i blokowe. Możesz użyć dowolnego z nich zgodnie z przepływem strony i w odniesieniu do innych pól na stronie.

Ten blog poprowadzi Cię o CSS Inline i Block Elements. Więc zacznijmy!

Jakie są wartości właściwości wyświetlania CSS?

Trzy wartości właściwości wyświetlania CSS są wymienione poniżej:

• blok: Elementy blokowe zaczynają się na nowej linii i wypełniają całą szerokość, od lewej do prawej.
• Wline: Elementy wbudowane pojawiają się na tej samej linii.
• Block wbudowany: Wartość właściwości wbudowanego jest jak wartość wbudowana, ale zapewnia również właściwości marginesu i wyściółki dla elementu.

Rozwińmy każdą z nich przez przykład jeden po drugim!

Przykład

W pliku HTML dodaj

element dostarczający treści do przeglądarki internetowej.

Html

Najlepsze samouczki CSS

Właściwość wyświetlania: blok

„„blok”Wyświetlacz przenosi element do nowej linii i zajmuje całą szerokość strony. Jeśli chcesz zmienić jego rozmiar, wykorzystaj właściwości szerokości i wysokości CSS.

Teraz, w CSS, zastosuj „wyświetlacz„Wartość właściwości ustalona jako„blok”Do dodanego akapitu i przypisz„granica" Jak "5px Solid RGB (204, 13, 172)". Granica oznacza zachowanie właściwości wyświetlania.

CSS

Poniższy obraz wskazuje zachowanie właściwości blokowej, jak opisaliśmy powyżej:

Własność wyświetlania: Inline

„„Wline„Własność nie przenosi elementu do następnego wiersza, a żadna z właściwości szerokości i wysokości nie wpłynie na tę właściwość.

W CSS przypisamy teraz „wyświetlacz„Wartość nieruchomości jako„Wline".

CSS

Wyświetl: Inline;

Poniższy obraz wskazuje, że tekst jest wbudowany:

Właściwość wyświetlania: Block Inline

Ta wartość działa tak samo jak wartość wyświetlania inline. Różnica polega na tym, że tę właściwość wyświetlacza można zmienić za pomocą właściwości marginesu i wyściółki. Ponadto możesz również ustawić jego wartości szerokości i wysokości zgodnie z preferencjami.

CSS

Wyświetlacz: Block Inline;

Poniżej znajduje się obraz, który pokazuje element blokowy wbudowanego bez właściwości szerokości i wysokości:

Aby zobaczyć wyraźną różnicę między wyświetlaczem wbudowanym i inline-block. Zobaczmy przez praktyczny przykład.

Przykład: Różnica między inline a blokiem inline

W sekcji kodu poniżej wspomnianej dodaliśmy akapit za pomocą

etykietka. Wewnątrz tego elementu umieściliśmy dwa „”Z klasą„X”I klasa„y".

Notatka: jest domyślnie elementem wbudowanym.

Html

CSS- Cascading = "x"> styl = arkusz „y”> opisuje, w jaki sposób elementy HTML mają być wyświetlane na ekranie.

W sekcji CSS przypiszmy wartość właściwości wyświetlania klasy X jako „Wline„Podczas gdy klasa Y z wartością”Block wbudowany". Zauważ, że wszystkie inne właściwości stylizacji są stosowane do obu klas podobnie.

CSS

Na obrazie podwładnym możesz zobaczyć wyraźną różnicę w obu klasach, pierwsza jest wbudowana, a druga jest wyświetlana w bloku inline:

Lista niektórych elementów HTML inline, bloków i bloków

Wiele elementów HTML jest domyślnie inline, blok. Niektóre z nich są wymienione poniżej:

HTML Elementy wbudowane

• Zakres
• A
• img

Elementy blokowe HTML

• P
• Li
• div
• H1
• Sekcja

HTML Elementy inline-block

• przycisk
• wejście
• TextArea
• wybierać

Omówiliśmy zachowanie elementów HTML inline, bloków i bloków.

Wniosek

Wyświetlacz właściwości CSS kontroluje układ elementów. Tę właściwość CSS można wykorzystać z trzema wartościami, wbudowanymi, blokiem i blokiem inline. Każda wartość reprezentuje inne zachowanie. Mówiąc dokładniej, wartość właściwości wbudowanego jest podobna do wartości wbudowanej, ale zapewnia również właściwości marginesu i wyściółki również do elementu. W tym artykule wyjaśniliśmy własność CSS z przykładami.