HTML aloca a estrutura básica da página da web em um site, e diferentes tipos de estilo podem ser aplicados utilizando CSS. Ele também possui várias propriedades de estilo usadas para desenhar formas diferentes, incluindo círculos, quadrados, retângulos, linhas, ovais e muito mais. Além disso, uma linha é a que é o elemento mais comumente utilizado que pode ser adicionado de qualquer forma, incluindo vertical e horizontalmente em um contêiner.

Esta postagem discutirá especificamente os seguintes métodos:

• Método 1: Como desenhar uma linha em um div usando o “fundo de fronteira" Propriedade?
• Método 2: Como desenhar uma linha em um div usando o “

  ---

  " Marcação?

Método 1: Como desenhar uma linha em um div usando a propriedade "Border-Bottom"?

Para desenhar uma linha em uma div, você pode usar o “fundo de fronteiraPropriedade, que esconde todos os lados, exceto o fundo da borda.

Para aplicar esta abordagem, confira as etapas fornecidas.

Etapa 1: Crie um contêiner div

Primeiro, crie um contêiner de div com a ajuda do “”Tag e insira um“eu ia”Atributo com um nome de acordo com sua escolha.

Etapa 2: Adicionar cabeçalho

Em seguida, adicione um título utilizando qualquer tag de título de “

" para "

”. Por exemplo, usamos o “

”Tag para adicionar o título de nível um.

Etapa 3: Crie outro contêiner div

Agora, crie outro contêiner Div seguindo o mesmo procedimento:

Desenhe uma linha

Saída

Etapa 4: estilo “Main-Div” contêiner

Acesse o contêiner Div usando o seletor de ID “#”E o nome do“eu ia”. Em seguida, aplique as propriedades do CSS para um estilo adicional:

#main-div
Cor: RGB (247, 171, 9);
Alinhamento de texto: centro;
margem: 50px;

Aqui:

• ““cor”A propriedade é utilizada para especificar a cor do elemento selecionado.
• ““alinhamento de texto”Propriedade alinha o texto adicionado no“Centro”.
• ““margem”Define espaço para o elemento externo.

Etapa 5: Recipiente de estilo “Line-Div”

Em seguida, acesse o segundo contêiner Div e aplique a seguinte propriedade CSS para obter a saída desejada:

.line-div
Largura: 150px;
Altura: 50px;
Posição: Absoluto;
fundo de borda: 3px vermelho sólido

De acordo com o snippet de código acima:

• Colocou o "largura”Valor para alocar a largura da área de conteúdo do elemento.
• ““altura”Propriedade define o tamanho do elemento verticalmente.
• ““posição”Especifica o tipo de método de posicionamento utilizado para um elemento
• Por último, mas não menos importante, "fundo de fronteira”Define a largura, o estilo de linha e a cor da borda inferior de uma caixa.

Pode -se observar que adicionamos com sucesso uma linha na parte inferior da div:

Método 2: Como desenhar uma linha em um div usando o “

---

" Marcação?

Em HTML, o “

---

”Tag representa uma regra horizontal que define uma quebra temática na página. Mais especificamente, essa tag pode ser utilizada para desenhar uma linha em uma div sem usar as propriedades CSS.

Para desenhar uma linha em um recipiente de div usando o

---

Tag, experimente as instruções abaixo.

Etapa 1: Crie um contêiner

Inicialmente, crie um contêiner de div com a ajuda do “" marcação. Além disso, adicione uma aula com um nome dentro da abertura "". Em seguida, adicione um título usando o “

" marcação.

Etapa 2: Insira “

---

”Tag para desenhar uma linha

Depois disso, insira a tag de parágrafo “

”E adicione o“

---

”Tag dentro do

marcação. Além disso, você também pode especificar a cor dentro da tag HR:

Desenhe uma linha

---

Saída

Etapa 3: Aplique propriedades CSS ao contêiner de "linha"

Então, acesse o “linha”Contêiner usando o seletor de pontos e estilizá -lo de acordo:

.linha
borda: 0;
Altura: 3px;
margem: 50px;

Aqui, aplicamos o “altura","largura" e "margem”Propriedades para a Div selecionada.

Saída

Pode -se observar que uma linha foi desenhada usando o

---

tag em html.

Conclusão

Para desenhar uma linha em uma div, os usuários de HTML podem utilizar o “

---

”Tag ou a“Borda inferiorPropriedade CSS. Na primeira abordagem, a propriedade CSS “Borda inferior”Esconde todos os lados da borda, exceto o fundo da borda. Para a segunda abordagem, você deve especificar apenas o “

---

”Tag para criar uma linha horizontal sem usar propriedades CSS. Este post demonstrou como desenhar uma linha em um div usando dois métodos diferentes.