div getting pushed out of screen when padding is added to body

Question

I am trying to center a div in a window with padding 10px in html. Whenever I add the padding to the body, the div gets pushed out of the window and scrollbars appear.

HTML Code

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
            <div id="div"></div>
        -->
    </body>
</html>

CSS Code

html {
    margin:0px;
    height:100%;
    width:100%;
}

body {
    margin:0px;
    height:100%;
    width:100%;
    padding:10px;
    background-color:#23272A;
}

#div {
    height: 100%;
    width: 100%;
    background-color:red;
}

The div is shown in red in the photos below. It is not centered within the window and there are scrollbars that appear when scrolling. The div extends outside the window.

All help is greatly appreciated!

Sorry for the late answer. I added some extra explanation. I hope this might be helpful — Subrato Pattanaik, Jan 30 '21 at 05:35

Joe · Accepted Answer · 2021-01-30T04:55:17.243

It's to do with the box model. Padding takes up space so it's growing larger than the container.

If you want it to pad but stay within the boundaries, meaning its width includes border and padding instead of width plus border plus padding then use this. I always put it at the top of my css along with margin and padding reset

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

If you don't already know the * is an all selector. Everything is affected. You can also just put it on the element in question or its parent, I don't remember, think it's the child itself. You can read about it here

One other thing to note, for non repetitive CSS, bit cleaner, you can use commas to add the same properties and values to different elements, for example:

* {
   margin: 0;
   padding:0;
   box-sizing: border-box;
}

html,
body,
#div {
   width:100%;
   height:100%
}

body {
    padding:10px;
    background-color:#23272A;
}

#div {
    background-color:red;
}

That way you don't have to type out the same stuff on different elements and it's cleaner to read imo

Thank you! I was using `box-sizing: border-box;` on #div. Thank you for explaining as well because I am new to html. — Neo630, Jan 30 '21 at 05:09

score 3 · Answer 2 · answered Jan 30 '21 at 05:07

@Joe's answer is probably better, but here is an alternative way you could do it which utilizes the calc() function:

#div {
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background-color: red;
}

It subtracts 2x the border size from the width and height to fit the container.

score 1 · Answer 3 · answered Jan 30 '21 at 05:31

Sorry for the late answer!!!

You can see the scroll bar because you have added 20px extra (10px top + 10px bottom) padding to the body element. You can remove the scroll bar by adding box-sizing: border-box; to the body element. But we'll suggest you that add this property to all the elements using the universal selector.

Some note: By default, the height of all the elements is auto. If we set the HTML element height to 100%, it will set the height of the canvas as there is no parent element to HTML. In my opinion, most people don't give height to the html element instead they give height (100vh) to the body element. The reason why they do like this because as we know the height of every element in CSS is auto. If we set the height of the child element to 100vh then the parent element height will automatically set to 100vh.

Now, if we give 100% height to the div element then the div height will be 100vh as it will take the height of the parent element which is the body element which is 100vh.

I will do like the following if I want to achieve your case.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0px;
  height: 100vh;
  padding: 10px;
  background-color: #23272A;
}

#div {
  height: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="div"></div>
</body>

</html>

div getting pushed out of screen when padding is added to body

3 Answers3