Why is there unknown margin/padding in the box?

Question

Can someone tell me why is there unknown margin/padding appearing at the bottom of the box? Please see if you can look into this and help me. I also want image to be zoomed in initially and then in scale=1 just before rotation and after rotation, it would be zoomed in again.

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f9cf47;
}

.box {
  width: 50%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid red;
}

.box p {
  margin: 0;
}

img {
  width: 100%;
}

.rotate-img {
  position: relative;
  animation-name: rotation;
  -webkit-animation: rotation 1s linear 1;
  -moz-animation: rotation 1s linear 1;
  animation: rotation 1s linear 1;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}


/* Standard syntax */

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

<div class="box">
  <img class="rotate-img" src="http://via.placeholder.com/350x150" />
</div>

Do you mean? https://stackoverflow.com/q/5804256/483779 – Stickers Mar 20 '18 at 17:49 — Stickers, Mar 20 '18 at 17:49

score 0 · Answer 1 · answered Mar 21 '18 at 04:58

Because inside that box you have an inline element img which are aligned to baseline by default...So you will need to use vertical-align: top to the image to remove the gap...

If you apply border to that image instead of box, you will not see any gap...

Also you will need to play with some keyframe timing to achieve your result

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f9cf47;
}

.box {
  width: 50%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid red;
}

.box p {
  margin: 0;
}

img {
  vertical-align: top;
  width: 100%;
}

.rotate-img {
  position: relative;
  animation-name: rotation;
  animation: rotation 2s linear 1;
  animation-fill-mode: forwards;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg) scale(2);
  }
  33% {
    transform: rotate(0deg) scale(1);
  }
  66% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(180deg) scale(2);
  }
}

<div class="box">
  <img class="rotate-img" src="http://via.placeholder.com/350x150" />
</div>

Why is there unknown margin/padding in the box?

1 Answers1