Distinguir as tags HTML Block e Inline
Neste artigo, explicarei o conceito de HTML Block e HTML Inline. Esta é uma questão muito importante, pois envolve muitas propriedades CSS.
Você já se perguntou por que o conteúdo de 2 tags p estão localizados em 2 linhas diferentes e, em 2 tags span, estão na mesma linha? Isso porque o navegador determina como exibir blocos e inline. Os cartões que estão mostrando o estilo de bloco estão em um bloco separado e os cartões que estão mostrando em linha estão em uma linha.
Mục lục
O que é uma tag de bloco HTML?
Bloco HTML é a exibição de uma tag HTML no navegador que terá a forma de um bloco, com comprimento de 100% e altura dependendo do conteúdo dentro. Isso significa que todas as tags HTML abaixo, quando exibidas no navegador, estarão em uma linha diferente.
Temos algumas tags HTML de bloco como: div, p, header, footer, table, ul, li, section, article .. e muitas outras.
As características comuns destes cartões são:
- Tem um comprimento padrão de 100%
- O espaço entre o conteúdo e a borda pode ser definido.
- A largura pode ser alterada usando a propriedade largura.
Exemplo : Duas tags div serão exibidas em 2 linhas diferentes.
<div>Nội dung thẻ div thứ nhất</div> <div>Nội dung thẻ div thứ hai</div>Resultado :
Nội dung thẻ thứ nhất Nội dung thẻ thứ haiO que é uma tag HTML inline?
HTML inline é uma maneira de exibir o conteúdo dentro de uma tag HTML dentro de um intervalo especificado. Ou seja, seu comprimento dependerá do tamanho dos dados. Portanto, as tags inline serão exibidas uma após a outra, não em uma linha como o bloco.
Existem muitas tags HTML que exibem formulários embutidos, como span, strong, i, b, a, br, big, button, textarea, label , …
Exemplo : Duas tags span exibirão dados consecutivos, não em 2 linhas como no exemplo 1.
<span>Nội dung thẻ span thứ nhất</span> <span>Nội dung thẻ span thứ hai</span>Quando usar tags HTML em linha e em bloco?
Há uma razão para dividir os dois formatos assim. Se você quiser criar uma tag HTML que envolva um bloco dentro, você deve usar uma tag div ou p, porque ela renderiza um bloco. Se você deseja exibir dados em uma linha, use tags inline.
A questão é: podemos transformar uma tag de bloco em uma tag inline? Muito simples, basta usar a propriedade display CSS.
Exemplo : defina CSS display:inline para duas tags div.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; display: inline } </style> </head> <body> <div>Nội dung thẻ div inline thứ nhất</div> <div>Nội dung thẻ div inline thứ hai</div> </body> </html>Resultado :
Nội dung thẻ div inline thứ nhất Nội dung thẻ div inline thứ nhấtPor outro lado, se você deseja converter de inline para block, use a propriedade CSS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: white; display: block } </style> </head> <body> <span>Nội dung thẻ span block thứ nhất</span> <span>Nội dung thẻ span block thứ hai</span> </body> </html>Resultado : Embora seja uma tag span, ela ainda exibe o bloco.
Nội dung thẻ span block thứ nhất Nội dung thẻ span block thứ haiEntão eu terminei o tutorial sobre como usar inline e block em HTML. Mais tarde, ao trabalhar com CSS, você o encontrará muito.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
