Crea espazos e separación física de elementos en HTML con CSS
Creación de espazos e separación física de elementos en HTML pode ser difícil de entender para o deseño web de inicio. Isto ocorre porque HTML ten unha propiedade coñecida como "colapso no espazo en branco". se escribe 1 espazo ou 100 no seu código HTML, o navegador web colapsa automaticamente eses espazos a un só espazo. Isto é diferente dun programa como Microsoft Word , que permite aos creadores de documentos engadir varios espazos para separar as palabras e outros elementos dese documento.
Non é así o funcionamento do espazo de deseño do sitio web.
Entón, como engades espazos en branco en HTML que aparecen na páxina web ? Este artigo examina algunhas das diferentes formas.
Espazos en HTML con CSS
A forma preferida de engadir espazos no teu HTML é con Cascading Style Sheets (CSS) . CSS debe ser usado para engadir calquera aspecto visual dunha páxina web, e dado que o espazamento forma parte das características de deseño visual dunha páxina, CSS é onde quere que se faga.
En CSS, pode empregar as marxes ou as propiedades de recheo para engadir espazo ao redor de elementos. Ademais, a propiedade de sangría de texto engade espazo á parte frontal do texto, como para sangrar os parágrafos.
Aquí tes un exemplo de como usar CSS para engadir espazo diante de todos os teus parágrafos. Engada o seguinte CSS á súa folla de estilo externa ou interna :
p {
guión de texto: 3em;
}
Espazos en HTML: dentro do seu texto
Se só queres engadir un espazo adicional ou dous ao teu texto, podes usar o espazo sen interrupción.
Este personaxe actúa como un carácter de espazo estándar, só que non colapsa dentro do navegador.
Aquí tes un exemplo de como engadir cinco espazos dentro dunha liña de texto:
Este texto ten cinco espazos extra dentro del
Usa o HTML:
Este texto ten & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cinco espazos extra dentro del
Tamén pode usar a etiqueta de Google para engadir salto de liña extra.
Esta oración ten cinco saltos de liña ao final dela
Por que o espazo en HTML é unha mala idea
Mentres estas dúas opcións funcionan: o elemento de espazo non creativo engadirá espazamento ao texto e os saltos de liña engadirán un espazamento por debaixo do parágrafo que se mostra arriba; esta non é a mellor forma de crear espazos na páxina web. Engadindo estes elementos ao seu HTML engade información visual ao código en vez de separar a estrutura dunha páxina (HTML) dos estilos visuais (CSS). As boas prácticas ditan que estas deben ser separadas por varios motivos, incluída a facilidade de actualización no futuro e o tamaño do arquivo global e o rendemento da páxina.
Se usa unha folla de estilo externa para dictar todos os seus estilos e espazos, é fácil de cambiar os estilos para todo o sitio, xa que simplemente ten que actualizar esa folla de estilo.
Considere o exemplo anterior da sentenza con cinco etiquetas ao final do mesmo. Se quería esa cantidade de espazo no fondo de cada parágrafo, necesitaría engadir ese código HTML a cada parágrafo do seu sitio completo. Esa é unha boa cantidade de marcación extra que inflará as túas páxinas.
Adicionalmente, se decide baixar a estrada que este espazo é demasiado ou moi pouco e quere cambiar un pouco, necesitará editar cada parágrafo no seu sitio web completo. Non grazas!
En lugar de engadir estes elementos de espazamento ao seu código, use CSS.
p {
padding-bottom: 20 píxeles;
}
Esa liña de CSS engadirá espazo entre os parágrafos da páxina. Se quería cambiar ese espazo no futuro, edite esta liña (en lugar do código de todo o sitio) e é bo ir.
Agora, se necesitas engadir un espazo único nunha parte do teu sitio web, usar unha etiqueta
ou un só espazo sen interrupción non é a fin do mundo, pero debes ter coidado.
Usar estas opcións de espazo en liña HTML pode ser unha pendente resbaladiza. Aínda que un ou dous non poden prexudicar o seu sitio, se continúa por ese camiño, introducirá problemas nas súas páxinas. Ao final, é mellor virar a CSS para o espazo de HTML e todas as outras necesidades de visualización da páxina web.