Html Question posted in
Some basic documentation can be found here.

Html – Why is there a white space left under the div when I apply box-shadow?

I’m trying to make a page with 3 images, each one inside a div, but when applying box-shadow there is a gap underneath.

Image with example of the problem

<style>
     body {
          margin: 0;
     }

     .img img {
          width: 300px;
          height: 300px;
     }

     .contenedor {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
     }

     .tarjeta {
          margin: 20px;
          position: relative;
          box-shadow: 0px 0px 10px 10px gray;
     }

     .cuerpo {
          position: absolute;
          top: 0;
     }
</style>

<body>
     <div class="contenedor">

          <div class="tarjeta">
               <div class="img">
                    <img src="img/image1.jpg" alt="">
               </div>

               <div class="cuerpo">
                    <div class="texto">
                         <h3>Juanita</h3>
                         <p>Modelo: Lorem ipsum, dolor sit amet consectetur   adipisicing elit. Dolores, nihil.</p>
                    </div>
               </div>
          </div>

I want to apply the box-shadow effect to each of the divs without leaving a gap underneath. I’ve tried applying a height: 100% to the images so that they occupy the entire height of the div, but it doesn’t work. This problem only appears when applying box-shadow; if I remove the effect, that gap disappears. I’ve also tried adjusting the margin, padding, and box-sizing properties, but none of them seem to solve the issue. I’m looking for a solution that will allow me to apply the box-shadow effect without creating any unwanted gaps between the divs.

Tags:

2

Answers


  1. 0

    Its because, by default, images are display: inline and aligned with the baseline of any adjacent text. The space below the baseline is for descenders in the text.

    Easiest fix is to style the images themselves as display: block or display: inline-block. Another option is to adjust the line-height of the parent to a value less than 1.

    Login or Signup to reply.
  2. 0

    To fix this issue, there are many methods, as shown below:

    1. Vertical alignment can be set to the top, center, or bottom.

      img { vertical-align: top; /* or bottom or middle */ }

    2. Change the image from the usual inline element to a block-level element.

      img {
      display: block;
      }

    3. Set the parent’s line height to 0.

      div {
      line-height: 0;
      }

    The easiest use is to change the img element’s display to block.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search