HTML Espaçamento horizontal irregular no site.

Cris Ider · 10 de maio de 2018

Olá, pessoal. Sou iniciante em html e estou fazendo uma tarefa para faculdade sobre html.

Estou montando um site de exercício e o resultado é o da imagem. Coisa bem simples mesmo.

Mas estou tendo problemas nos espaçamentos entre elementos dentro de uma mesma div.

Como podem ver, o termo "Assista ao vídeo" fica bem distante do vídeo que também apresenta problemas no posicionamento dos controles.

Qual é a solução para este problema ou algo que eu esteja fazendo de errado. Já tentei inserir espaços em branco entre um elemento e outro para ver se melhora mas a tendência é de que a div cresça para baixo e continue com as aberturas grandes.

Inseri o site compactado e também a index.html e o estilo.css em formato txt. Caso alguém queira dar uma olhada.

Obrigado!

Tarefa_Semana_5.zip

estilos.txt

index.txt

FFmarini · 10 de maio de 2018

@Cris Ider Cara, sou iniciante em HTML também mas eu tentei o seguinte, usei o inspecionar do chrome e coloquei assim
<video controls="" width="auto" height="auto">, o vídeo ficou bem grande e sem as bordas "invisíveis"

navegantenarede · 10 de maio de 2018

Fiz um teste com o seu código e não apresentou os espaçamentos tão grandes como você visualiza, pode verificar se persiste em navegadores diferentes?

Por padrão, os elementos de heading possuem margens, mas você pode sobrescrever com CSS e para visualizar, basta inspecionar o elemento no seu navegador.

Eu coloquei o seu código aqui: https://jsfiddle.net/tf0rxp9o/ - e adicionei uma regra simples para adicionar borda nos elementos, assim você tem uma ideia das margens de cada um.

Veja também os erros de sintaxe indicados no editor, o elemento <br> por exemplo, não precisa de uma tag de fechamento.

Cris Ider · 10 de maio de 2018

Valeu pela dica, navegantenarede!

Eu tentei em 3 computadores diferentes (2 com Windows 7 - Google Chrome e 1 Windows XP - Google Chrome) e todos apresentaram essa distância exagerada.

Vou experimentar em browsers diferentes.

E uma pergunta: O seu mostrou como na imagem que eu postei acima ou ficou mais próximo?

groutmoustache · 10 de maio de 2018

@Cris Ider, como o @FFmarini disse: o problema está nas dimensões do vídeo.

Nesse sentido, você está usando uma altura (height) desproporcional a largura (width). Assim, a altura do elemento video está recebendo uma altura de 375px, como você definiu:

<video controls width="400" height="375">

No entanto, a altura do conteúdo (a parte que vemos o vídeo, em si) não segue essa altura do elemento, porque está desproporcional a largura. Por isso, você tem que remover o atributo height ou alterar o valor para auto.

Solução 1

<video controls width="400">

Solução 2

<video controls width="400" height="auto">

Conclusão

Ambas soluções configuram a altura do elemento para ser automática, portanto, proporcional à largura. Dessa maneira, se quiser aumentar o tamanho do vídeo, de agora em diante, basta alterar o valor do atributo width.