Question 41310 in PHP Question posted in
Official manual can be found here.

Padding left or right also creates space at the bottom – PHP

Not exactly an issue since I can easily achieve the desired effects using a margin, but just curious: why does specifying the padding left or right for a div also create a space at the bottom of the div?
officelocation

<div class="col-md-12 row" style="margin:0px;padding:0px"> 

                                            <div class="col-md-4" style="padding-bottom: 0px;padding-left:0px">
                                                <img src="/images/1.jpg">
                                            </div>

                                             <div class="col-md-4" style="padding-bottom: 0px;padding-left:10px">
                                                <img src="/images/2.jpg">
                                            </div>

                                             <div class="col-md-4" style="padding-bottom: 0px;padding-right:0px">
                                                <img src="/images/3.jpg">
                                            </div>


</div>

I expected this code to line up the three images perfectly. But as you can see in the picture: the middle image, having padding-left:10px is also creating some padding at the bottom despite it specifying 0px. I resolved the issue by using margin in the img tag and avoiding padding, but it made me curious: why would padding-left create space at the bottom?

Tags:

2

Answers


  1. 0

    why would padding-left create space at the bottom?

    Probably because the image is set to scale with the available width – which just got reduced due to your additional sideways padding. And so, since it resizes proportionally, keeping its aspect ratio, the height also gets reduced.

    Login or Signup to reply.
  2. 0

    You have two options

    1. Add a fixed width and height for the pictures and use object-fit: cover like this:

      <img src="/images/3.jpg" width="200" height="80" style="object-fit: cover">

    2. Do the same thing but with the images as a background and use background-size:cover

    Keep in mind that this will crop your picture to fit the size.

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

Back To Top
Search