Esta pregunta ya tiene respuestas aquí:
¿Cómo eliminar el espacio entre elementos en línea/bloque en línea?
(41 respuestas)
Cerrado
hace 2 años
.
Por qué hay un espacio entre dos <hr> etiquetas?
Cuando hago el ancho de <hr> etiquetas, no funcionó. Llegué al 49%, pero todavía hay un espacio entre los dos <hr> etiqueta.¿Cómo elimino el espacio del archivo <hr> ¿etiquetas?
Aquí está el código HTML y CSS:
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/66832728/nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left">
<hr id="right">
</body>
</html>
------------------------------------
En su lugar, puedes utilizar una sola hora con un fondo degradado.
* {
margin: 0;
padding: 0;
}
body {
background-color: #181818;
color: white;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
color: #3ea6ff;
}
.home {
font-size: 3em;
background-color: #202020;
}
#night {
color: #f34601;
}
#mare {
color: #3ea6ff;
}
hr {
display: inline-block;
background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
height: 2px;
width: 100%;
border: 0;
}
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr>
------------------------------------
comprueba el código. Esta es realmente una mejor respuesta (en mi opinión) la navaja de occam
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/66832728/nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left"><hr id="right">
<h1> OR YOU CAN DO THIS</h1>
<hr id="left"><!--
--><hr id="right">
</body>
</html>
------------------------------------
Flotar :
Usando float:left; en ambas horas parecen funcionar.
Doblar :
Sin embargo, no recomiendo hacer esto. Lo que haría es envolver las 2 horas en un div y agregar display: flex; en eso. Y en los niños agregaría flex-grow:1;
Si no me equivoco, debería aumentar las 2 horas para ocupar todo el espacio en el div de manera uniforme. También funcionará mejor con el resto de la página en lugar de usar flotador, que a veces puede estropear todo (según mi propia experiencia).
1
<hora> ocupará todo el espacio disponible de forma predeterminada. Y usando <hr><hr> También colocará las líneas una al lado de la otra de forma predeterminada. Pero esa no era la pregunta. Por lo tanto, no se necesitan ni flaot ni flexbox. No le hace nada al código lo que el código no hace por sí mismo.
- tacoshy
27/03/2021 a las 15:25
------------------------------------
<hr id="left">
<br>
<hr id="right">
Puedes poner un br entre las horas
un br significa un descanso.
Mira este enlace para ver más
https://www.w3schools.com/tags/tag_br.asp
1
Esto no es lo que pidió el OP. él quiere el 2 <hr> en la misma línea sin espacios. No veo cómo agregar un salto de línea eliminaría la brecha. Acabas de poner bost <hr> etiquetas una debajo de la otra lo que no estaba previsto.
- tacoshy
27/03/2021 a las 15:22
