Padding changing the size on an image [duplicate]

This question already has an answer here:

width: 100%-padding?

14 answers

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

asked Nov 15 '18 at 17:02

wtreston

580214

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 19:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

width: 100%-padding?

14 answers

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

asked Nov 15 '18 at 17:02

wtreston

580214

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 19:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

width: 100%-padding?

14 answers

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

asked Nov 15 '18 at 17:02

wtreston

580214

This question already has an answer here:

width: 100%-padding?

14 answers

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

This question already has an answer here:

width: 100%-padding?

14 answers

html css

asked Nov 15 '18 at 17:02

wtreston

580214

asked Nov 15 '18 at 17:02

wtreston

580214

asked Nov 15 '18 at 17:02

wtreston

580214

asked Nov 15 '18 at 17:02

wtreston

580214

asked Nov 15 '18 at 17:02

wtreston

580214

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 19:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 19:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

2 Answers
2

active

oldest

votes

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

2,1993722

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

add a comment |

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,089822

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

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

2,1993722

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

add a comment |

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

2,1993722

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

add a comment |

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

2,1993722

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>

.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>

.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

2,1993722

edited Nov 15 '18 at 17:12

answered Nov 15 '18 at 17:04

Jonathan Gagne

2,1993722

answered Nov 15 '18 at 17:04

Jonathan Gagne

2,1993722

answered Nov 15 '18 at 17:04

Jonathan Gagne

2,1993722

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

add a comment |

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

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

add a comment |

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,089822

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

add a comment |

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,089822

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

add a comment |

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,089822

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,089822

answered Nov 15 '18 at 17:04

rubentd

1,089822

answered Nov 15 '18 at 17:04

rubentd

1,089822

answered Nov 15 '18 at 17:04

rubentd

1,089822

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

add a comment |

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

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

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky