Padding changing the size on an image

Question

So im trying to create some padding for my profile_pic div.

This is the html:

  <body>
  <div id="content" class="content">
    <div id="profile_pic" class="profile_pic">
    </div>
    <div id="overview" class="overview">
        asdasdasdasdasd
    </div>
    <div id="buttons" class="buttons">
    <!-- Sport, Academic, Other -->
    </div>
  </div>
  </body>

and this the css

.profile_pic {
    height: 30%;
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    background-image: url("./images/profile_pic.jpg");
    border-radius: 8px;
    background-repeat:no-repeat;
    background-size:cover;
}

and this is what the page looks like

when i add the lines

padding-top: 10%;
padding-bottom: 10%;

this is what happens to the image

could someone please explain why this is happen

Jonathan Gagne · Accepted Answer · 2018-11-15T17:12:01.980

2

Use box-sizing: border-box;, it includes padding and border in the element's total width and height. ;)

Here would be the final code.

.profile_pic {
  box-sizing: border-box;
  height: 30%;
  width: 15%;
  margin-left: auto;
  margin-right: auto;
  background-image: url("./images/profile_pic.jpg");
  border-radius: 8px;
  background-repeat:no-repeat;
  background-size:cover;
}

<div id="content" class="content">
  <div id="profile_pic" class="profile_pic">
  </div>
  <div id="overview" class="overview">
      asdasdasdasdasd
  </div>
  <div id="buttons" class="buttons">
  <!-- Sport, Academic, Other -->
  </div>
</div>

edited Nov 15 '18 at 17:12

answered Nov 15 '18 at 17:04

Jonathan Gagne

4,241
5
18
30

Ok so I have changed the css, however the image is still the same distance from the top of the screen as it was before. How would I move it down X amount – wtreston Nov 15 '18 at 17:16
Use `margin-top: 100px;` by example – Jonathan Gagne Nov 15 '18 at 17:18
Perfect thats worked – wtreston Nov 15 '18 at 17:35
Awesome! I'm glad, let me know if you need anything else! – Jonathan Gagne Nov 15 '18 at 17:36

score 1 · Answer 2 · answered Nov 15 '18 at 17:04

1

Set this property to the image: box-sizing: border-box

This way the total size of the image will be calculated including the padding as well, instead of adding the padding size as extra.

answered Nov 15 '18 at 17:04

rubentd

1,245
11
25

Also, take into consideration that 10% of padding will use the parent element size as a reference, not the size of the image – rubentd Nov 15 '18 at 17:05

Padding changing the size on an image

2 Answers2