Różnice między elementami blokowymi a wbudowanymi

HTML składa się z różnych elementów, które pełnią rolę bloków konstrukcyjnych stron internetowych. Każdy z tych elementów należy do jednej z dwóch kategorii: elementy blokowe lub element wbudowany. Zrozumienie różnicy między tymi dwoma typami elementów jest ważnym krokiem w budowaniu stron internetowych.

Elementy poziomu bloku Level

Czym więc jest element blokowy? Element blokowy to element HTML, który rozpoczyna nowy wiersz na stronie internetowej i rozciąga się na całą szerokość dostępnej poziomej przestrzeni elementu nadrzędnego. Tworzy duże bloki treści, takie jak akapity lub podziały stron. W rzeczywistości większość elementów HTML to elementy blokowe.

W treści dokumentu HTML używane są elementy blokowe. Mogą zawierać elementy wbudowane, a także inne elementy blokowe.

Elementy wbudowane

W przeciwieństwie do elementu blokowego, element inline:

• Może zaczynać się w linii.
• Nie rozpoczyna nowej linii.
• Jego szerokość rozciąga się tylko tak daleko, jak jest zdefiniowana przez jego znaczniki.

Przykładem elementu wbudowanego jest , co powoduje, że czcionka treści tekstowej zawartej w pogrubieniu. Element śródliniowy zazwyczaj zawiera tylko inne elementy śródliniowe lub nie może w ogóle zawierać niczego, na przykład
przerwać tag.

Istnieje również trzeci typ elementów w HTML: te, które w ogóle się nie wyświetlają. Te elementy dostarczają informacji o stronie, ale nie są wyświetlane podczas renderowania w przeglądarce sieci Web.

Na przykład:

•  definiuje metadane.
•  jest elementem dokumentu HTML, który przechowuje te elementy.

Przełączanie typów elementów wbudowanych i blokowych

Możesz zmienić typ elementu z wbudowanego na blokowy lub odwrotnie, używając jednej z tych właściwości CSS:

• Blok wyświetlacza; 

• wyświetlacz: wbudowany; 

• Nie wyświetla się;

CSS właściwość wyświetlania pozwala zmienić właściwość śródliniową na blokową lub blokową na śródliniową lub nie wyświetlać w ogóle.

Kiedy zmienić właściwość wyświetlania?

Ogólnie rzecz biorąc, należy pozostawić w spokoju właściwość wyświetlania, ale w niektórych przypadkach przydatna może być zamiana właściwości wyświetlania w wierszu i bloku.

• Menu z listą poziomą: Listy są elementami blokowymi, ale jeśli chcesz, aby menu było wyświetlane w poziomie, musisz przekonwertować listę na element wbudowany, aby każdy element menu nie zaczynał się w nowym wierszu.
• Nagłówki w tekście: Czasami możesz chcieć, aby nagłówek pozostał w tekście, ale zachowaj wartości nagłówka HTML. Zmiana wartości h1 do h6 na inline pozwoli tekstowi, który pojawia się po tagu zamykającym, dalej przepływać obok niego w tym samym wierszu, zamiast zaczynać się w nowym wierszu.
• Usuwanie elementu: Jeśli chcesz całkowicie usunąć element z dokumentu normalny przepływ, możesz ustawić wyświetlacz na

  Żaden

  Jedna uwaga, zachowaj ostrożność podczas korzystania z wyświetlacza: brak. Chociaż ten styl rzeczywiście sprawi, że element będzie niewidoczny, nigdy nie chcesz używać tego do ukrywania tekstu dodanego ze względów SEO, ale nie chcesz wyświetlać go odwiedzającym. To pewny sposób na ukaranie witryny za czarne podejście do SEO.

Typowe błędy formatowania elementów wbudowanych

Jednym z najczęstszych błędów popełnianych przez nowicjusza w projektowaniu stron internetowych jest próba ustawienia szerokości elementu wbudowanego. To nie działa, ponieważ szerokości elementów wbudowanych nie są definiowane przez pole kontenera.

Elementy śródliniowe ignorują kilka właściwości:

• szerokość

  i

  wysokość

• maksymalna szerokość

  i

  maksymalna wysokość

• minimalna szerokość

  i

  minimalna wysokość

Jeśli potrzebujesz zdefiniować szerokość lub wysokość, jaką powinien zająć element, będziesz chciał zastosować to do elementu blokowego zawierającego tekst w tekście.