1

pasa que estoy aprendiendo CSS y aveces ocurre que una etiqueta que va despues de otra deja un espacio en blanco por sobre la otra, y no se como quitarlo, incluso he probado con poner margen 0 este es el codigo:

pagina.html

<html>

<head>
    <title>Pagina practica 05</title>
    <style type="text/css">   
  body{
      background-color: #f35;
  }
  header img{
      width: 1890;
      height: 600;
  }
  nav p {
      display: inline-block;
  }
  article{
      background-color: white;
  }
  footer h3{
      background-color: gray;
  }
  #imagen_Fija{
      position: fixed;
      width: 200;
      height: 200;
      left: 80%;
      top: 70%;
  }  
  </style>
</head>
<body>
    <header>
  <img src="imagenes/imagenmock.jpg"/>
</header>

<nav>
  <a href="#Titulo_1">Titulo 1</a>
  <a href="#Titulo_2">Titulo 2</a>
  <a href="#Titulo_3">Titulo 3</a>
  <a href="#Titulo_4">Titulo 4</a>
  <a href="#Titulo_5">Titulo 5</a>
</nav>

<article>
  <section>
    <p id="Titulo_1">Titulo 1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in diam ut ex sollicitudin consequat. Donec pretium risus mi, id molestie nisl interdum sit amet. Etiam interdum accumsan iaculis. Sed tempus dolor vel ligula tristique, consequat tempus sapien venenatis. Sed sit amet velit eleifend ante tincidunt ornare. Maecenas massa arcu, mattis vitae justo ornare, lobortis gravida quam. Pellentesque aliquam sollicitudin neque, in lacinia augue pretium sed. Duis accumsan nibh justo, lacinia tincidunt ex mattis id. Maecenas congue felis non ligula fermentum, eu euismod lectus posuere. Nam nunc ligula, eleifend vitae ante at, dictum consequat sem. Morbi consequat et lorem sit amet imperdiet. Ut blandit massa lorem, ut pretium enim malesuada molestie. Nulla venenatis nisi id lectus dictum commodo. Suspendisse eu lectus nisl. Duis lorem eros, dapibus quis faucibus ac, congue in justo. Donec eget neque sapien.</p>

    <p>Integer bibendum neque eu sapien tincidunt, sed molestie nunc placerat. Donec quis urna a lectus elementum tincidunt. Aenean feugiat vestibulum ligula, et accumsan arcu ultricies at. Donec quis arcu sed nisi posuere tempus. Donec a commodo felis. Quisque iaculis ultrices nibh, sit amet laoreet augue fringilla eget. Vestibulum bibendum nunc in congue suscipit. In sit amet metus mauris. Nam sit amet metus ac justo posuere malesuada a et sem. Integer eu luctus leo. Sed placerat, nisi at tempus euismod, lacus nisl maximus ex, ultricies accumsan ipsum augue a augue. Mauris ut aliquam nulla.
    </p>
  </section>
  <section>
    <p id="Titulo_2">Titulo 2</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in diam ut ex sollicitudin consequat. Donec pretium risus mi, id molestie nisl interdum sit amet. Etiam interdum accumsan iaculis. Sed tempus dolor vel ligula tristique, consequat tempus sapien venenatis. Sed sit amet velit eleifend ante tincidunt ornare. Maecenas massa arcu, mattis vitae justo ornare, lobortis gravida quam. Pellentesque aliquam sollicitudin neque, in lacinia augue pretium sed. Duis accumsan nibh justo, lacinia tincidunt ex mattis id. Maecenas congue felis non ligula fermentum, eu euismod lectus posuere. Nam nunc ligula, eleifend vitae ante at, dictum consequat sem. Morbi consequat et lorem sit amet imperdiet. Ut blandit massa lorem, ut pretium enim malesuada molestie. Nulla venenatis nisi id lectus dictum commodo. Suspendisse eu lectus nisl. Duis lorem eros, dapibus quis faucibus ac, congue in justo. Donec eget neque sapien.</p>

    <p>Integer bibendum neque eu sapien tincidunt, sed molestie nunc placerat. Donec quis urna a lectus elementum tincidunt. Aenean feugiat vestibulum ligula, et accumsan arcu ultricies at. Donec quis arcu sed nisi posuere tempus. Donec a commodo felis. Quisque iaculis ultrices nibh, sit amet laoreet augue fringilla eget. Vestibulum bibendum nunc in congue suscipit. In sit amet metus mauris. Nam sit amet metus ac justo posuere malesuada a et sem. Integer eu luctus leo. Sed placerat, nisi at tempus euismod, lacus nisl maximus ex, ultricies accumsan ipsum augue a augue. Mauris ut aliquam nulla.
    </p>
    </section>
    <section>
    <p id="Titulo_3">Titulo 3</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in diam ut ex sollicitudin consequat. Donec pretium risus mi, id molestie nisl interdum sit amet. Etiam interdum accumsan iaculis. Sed tempus dolor vel ligula tristique, consequat tempus sapien venenatis. Sed sit amet velit eleifend ante tincidunt ornare. Maecenas massa arcu, mattis vitae justo ornare, lobortis gravida quam. Pellentesque aliquam sollicitudin neque, in lacinia augue pretium sed. Duis accumsan nibh justo, lacinia tincidunt ex mattis id. Maecenas congue felis non ligula fermentum, eu euismod lectus posuere. Nam nunc ligula, eleifend vitae ante at, dictum consequat sem. Morbi consequat et lorem sit amet imperdiet. Ut blandit massa lorem, ut pretium enim malesuada molestie. Nulla venenatis nisi id lectus dictum commodo. Suspendisse eu lectus nisl. Duis lorem eros, dapibus quis faucibus ac, congue in justo. Donec eget neque sapien.</p>

    <p>Integer bibendum neque eu sapien tincidunt, sed molestie nunc placerat. Donec quis urna a lectus elementum tincidunt. Aenean feugiat vestibulum ligula, et accumsan arcu ultricies at. Donec quis arcu sed nisi posuere tempus. Donec a commodo felis. Quisque iaculis ultrices nibh, sit amet laoreet augue fringilla eget. Vestibulum bibendum nunc in congue suscipit. In sit amet metus mauris. Nam sit amet metus ac justo posuere malesuada a et sem. Integer eu luctus leo. Sed placerat, nisi at tempus euismod, lacus nisl maximus ex, ultricies accumsan ipsum augue a augue. Mauris ut aliquam nulla.
    </p>
  </section>
    <section>
    <p id="Titulo_4">Titulo 4</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in diam ut ex sollicitudin consequat. Donec pretium risus mi, id molestie nisl interdum sit amet. Etiam interdum accumsan iaculis. Sed tempus dolor vel ligula tristique, consequat tempus sapien venenatis. Sed sit amet velit eleifend ante tincidunt ornare. Maecenas massa arcu, mattis vitae justo ornare, lobortis gravida quam. Pellentesque aliquam sollicitudin neque, in lacinia augue pretium sed. Duis accumsan nibh justo, lacinia tincidunt ex mattis id. Maecenas congue felis non ligula fermentum, eu euismod lectus posuere. Nam nunc ligula, eleifend vitae ante at, dictum consequat sem. Morbi consequat et lorem sit amet imperdiet. Ut blandit massa lorem, ut pretium enim malesuada molestie. Nulla venenatis nisi id lectus dictum commodo. Suspendisse eu lectus nisl. Duis lorem eros, dapibus quis faucibus ac, congue in justo. Donec eget neque sapien.</p>

    <p>Integer bibendum neque eu sapien tincidunt, sed molestie nunc placerat. Donec quis urna a lectus elementum tincidunt. Aenean feugiat vestibulum ligula, et accumsan arcu ultricies at. Donec quis arcu sed nisi posuere tempus. Donec a commodo felis. Quisque iaculis ultrices nibh, sit amet laoreet augue fringilla eget. Vestibulum bibendum nunc in congue suscipit. In sit amet metus mauris. Nam sit amet metus ac justo posuere malesuada a et sem. Integer eu luctus leo. Sed placerat, nisi at tempus euismod, lacus nisl maximus ex, ultricies accumsan ipsum augue a augue. Mauris ut aliquam nulla.
    </p>
  </section>
    <section>
    <p id="Titulo_5">Titulo 5</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in diam ut ex sollicitudin consequat. Donec pretium risus mi, id molestie nisl interdum sit amet. Etiam interdum accumsan iaculis. Sed tempus dolor vel ligula tristique, consequat tempus sapien venenatis. Sed sit amet velit eleifend ante tincidunt ornare. Maecenas massa arcu, mattis vitae justo ornare, lobortis gravida quam. Pellentesque aliquam sollicitudin neque, in lacinia augue pretium sed. Duis accumsan nibh justo, lacinia tincidunt ex mattis id. Maecenas congue felis non ligula fermentum, eu euismod lectus posuere. Nam nunc ligula, eleifend vitae ante at, dictum consequat sem. Morbi consequat et lorem sit amet imperdiet. Ut blandit massa lorem, ut pretium enim malesuada molestie. Nulla venenatis nisi id lectus dictum commodo. Suspendisse eu lectus nisl. Duis lorem eros, dapibus quis faucibus ac, congue in justo. Donec eget neque sapien.</p>

    <p>Integer bibendum neque eu sapien tincidunt, sed molestie nunc placerat. Donec quis urna a lectus elementum tincidunt. Aenean feugiat vestibulum ligula, et accumsan arcu ultricies at. Donec quis arcu sed nisi posuere tempus. Donec a commodo felis. Quisque iaculis ultrices nibh, sit amet laoreet augue fringilla eget. Vestibulum bibendum nunc in congue suscipit. In sit amet metus mauris. Nam sit amet metus ac justo posuere malesuada a et sem. Integer eu luctus leo. Sed placerat, nisi at tempus euismod, lacus nisl maximus ex, ultricies accumsan ipsum augue a augue. Mauris ut aliquam nulla.
    </p>
  </section>

</article>

<footer><h3>Todos los derechos reservados. Pagina propiedad de sus dueños</h3></footer>

<div id="imagen_Fija">
<img src="imagenes/imagenfija.jpg"/>
</div>

</body>

introducir la descripción de la imagen aquí se puede observar que entre el footer y el article existe un espacio que no se quita almenos que ponga el margen del footer en -16px o algo asi, pero esta solucion me parece muy rebuscada me gustaria saber porque sucede ese comportamiento, pues no es la primera vez que me pasa, la otra vez me paso con el encabezado, no se supone que el navegador deberia poner cada bloque debajo del otro pegados, muchas gracias

2 respuestas 2

1

En este caso el problema te viene de que dentro del <footer> has usado un tag <h3>, el cual de por sí ya tiene unos márgenes superior e inferior por defecto.

No sé yo si será buena idea usar h3 dentro del pie de página, pues el marcado html debe usarse con fines semánticos, y no por el aspecto que tengan, y el significado de h3 es un encabezado de nivel 3, que no tiene sentido en un pie de página.

Si lo que querías es que el pie saliera en negrita, o con algún aspecto especial, lo que deberías hacer es darle estilo con css al elemento footer, o mejor aún, dentro del footer usar un div o un span con la clase adecuada para darle el estilo que prefieras.

Extra: Para depurar este tipo de problemas con los estilos, es muy útil utilizar el inspector del navegador web, y fijarse en el código de colores que utiliza para señalarte qué partes de una caja corresponden a los márgenes, al padding interno, y a su tamaño "natural".


introducir la descripción de la imagen aquí

Aqui vemos por ejemplo que el espacio de separación pertenece al elemento h3, en concreto a su margen superior e inferior (marcados en naranja). La caja abajo a la derecha muestra en concreto los valores de ese margen (18.720 pt), del padding (0pt), el borde (0pt) y la altura natural de la caja (22pt)

1

Los navegadores tienen propiedades definidas por defecto para casi todos los elementos HTML. Por esa razón muchos de ellos incluyen márgenes, incluido el <body>. Lo más adecuado es definir las propiedades de cada elemento que uses, aunque es más sencillo usar un reset como por ejemplo:

* {
margin: 0
}

Eso eliminará los márgenes para todos los elementos. Luego puedes añadírselo sólo a aquellos que lo requieran. Sin embargo te recomiendo definir las propiedades para cada elemento o clase que uses ya que el selector * repercute en la velocidad de pintado al tener que recorrer todos los elementos.

Tu Respuesta

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

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