1

Estoy trabajando en una aplicación web en el cual le agrego, a través de un archivo aparte un ‘footer’, el cual contiene un pequeño texto de descripción y enlaces de redirección a un sitio web. mi problema surge cuando quiero hacer una división con una línea entre el archivo principal y el archivo que contiene el footer, la línea aparece pero está en medio de un espacio en blanco, tanto arriba como abajo. estuve leyendo al respecto pero no pude llegar a una solución aún. Agradecería si alguien podría ayudarme… introducir la descripción de la imagen aquí

La imagen muestra como se ve cuando le agrego la etiqueta hr, sin embargo cuando lo saco se ve normal sin ninguna Línea ni espacios, a lo que yo quiero que se vee como la segunda imagen.

También me di cuenta que solo sucede con algunas paginas, por ejemplo con el mismo código mi ventana 'Home' se muestra sin espacios de esta manera Ventana Inicio

PD: Soy nueva en esta comunidad y no logro subir código, por eso adjunto las imágenes

//clientes.js 
fetchList(); //llamado y ejecucuion de la funcioon que muestra el listado de clientes

// Listado

function fetchList() {
  $.ajax({
    url: 'lista.php',
    type: 'GET',
    success: function(response) {
      let lista = JSON.parse(response);
      console.log(lista);
      let template = '';

      if (lista.length !== 0) {

        lista.forEach(lista => {
          template +=
            `<tr clienteId="${lista.clienteId}">
                            <td>${lista.clienteId}</td>
                            <td>${lista.cliente}</td>
                            <td>${lista.cuil}</td>
                            <td>${lista.nro_cuenta}</td>
                            <td><button class="perfil btn btn-warning"><a id="perfil" href="" personaId="${lista.personaId}" style="color: black" >Ver Perfil</a></button></td>
                            <td>
                                <button class="cliente-edit btn btn-warning" data-toggle="modal" data-target="#editarCliente" personaId="${lista.personaId}" ><i class="far fa-edit"></i></button>
                                <button class="deleteCliente btn btn-danger"><i class="far fa-trash-alt"></i></button>
                            </td>                    
                        </tr>`
        });
        $("#listadoClientes").html(template);

      } else {
        $("#listado-head").hide();
        template = '¡No se han encontrado registros de clientes activos en la base de datos, agregue al menos uno!';
        $(".card-body").html(template);

      }

    }
  });
}
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Listado de Clientes</title>
  <?php require '../../php/head_link.php'; ?>
  <?php require '../../php/head_script.php'; ?>
  <link rel="stylesheet" href="\autoparts_system\css\clientes.css">
  <script src="js/clientes.js"></script>

</head>

<body>





  <?php require '../../php/menu.php'; ?>

  <div class="container-fluid">

    <div class="card border-danger">
      <div class="card-header">
        <div class="btn-group fa-pull-right">
          <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#nuevoCliente"><i class="fas fa-plus"></i>
                           Agregar
                       </button>

        </div>
        <h3>Clientes</h3>

        <div class="card-body text-danger">

          <table class="table table-hover" id="listado-head">
            <thead class="thead-dark">
              <tr>
                <td>Id</td>
                <td>Cliente</td>
                <td>Cuil</td>
                <td>Cuenta</td>
                <td>Informacion</td>
                <td>Acciones</td>
              </tr>

            </thead>
            <tbody id="listadoClientes">

            </tbody>
          </table>

        </div>

      </div>
    </div>

  </div>
  <?php require "../../php/footer.php"; ?>

</body>

</html>

<!--footer.php-->
<hr>
<div class="container-fluid">

  <!--style="position: absolute; background: #c3c3c3"-->

  <div class="row">
    <div class="col-12">

      <footer class="page-footer font-small">

        <nav class="float-left">
          <ul>
            <li>
              <a class="footer-pweb" href="http://localhost/Pagina_Web_Final_DyDw/">
                            Web Site - Autopartes Formosa
                        </a>
            </li>
          </ul>
        </nav>
        <div class="copyright float-right">
          &copy;
          <script>
            document.write(new Date().getFullYear())
          </script>, creado con <i class="fas fa-heart"></i> por
          <a class="footer-pweb" href="https://asifsa18.blogspot.com/" target="_blank">Ruth Avalos</a> para una mejor experiencia web.
        </div>

      </footer>

    </div>
  </div>

2
  • Checa Cómo preguntar, edita copia y pega tu código mínimo necesario para poder ayudarte, si tienes problemas dándole formato no te apures aquí te ayudamos
    – user128299
    Commented el 6 oct. 2020 a las 18:58
  • Bien, ahí pude agregar un poquito de código, espero ayude para entender mejor mi problema :(
    – Ruth
    Commented el 6 oct. 2020 a las 19:22

1 respuesta 1

2

Creo que te refieres a los márgenes superior e inferior. Si es el caso, ocurre porque hay etiquetas de HTML a las cuales los navegadores tradicionalmente agregan algunas reglas, como por ejemplo los márgenes exteriores (margin) o interiores (padding).

En este caso sólo tienes que definir una regla CSS a tus hr y quitarles dichos márgenes superior e inferior.

span {
  border:1px solid red;
}

hr {
  border:1px solid cyan;
}
hr.no-space {
  margin:0;
}
<span>hola</span>
<hr/>
<span>adios</span>

<br/>
<br/>
<br/>
<br/>
<br/>

<span>hola</span>
<hr class="no-space"/>
<span>adios</span>

1
  • Bien :´) gracias geni@! desaparecieron los espacios
    – Ruth
    Commented el 6 oct. 2020 a las 20:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.