CSS - 100% + Padding

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

css - 100% + padding?

Block elements like <div>s automatically assume a 100% width after padding. I.e. you should be able to achieve the desired effect simply by specifying a padding, leaving the width on auto and making sure the element has display: block (default for <div>).

http://jsfiddle.net/EMYBm/8/

HTML padding with 100% width and height?

if my thought is right you need to use box-sizing:border-box , Specify that elements should have padding and border included in the element's total width and height:

*{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

please check this snippet

body {  margin:0;  padding:0;}.demo {  width:100%;  height:100vh;  float:left;  background:#000;  padding:5%;  box-sizing:border-box;}

<div class="demo"></div>

How does padding-top: 100% work?

Your child div is filling parent in 100% width. Padding-top property in percent is determined by div width. So, your child is getting 100% width of parent (30%) and padding top 100% means 100% width of that element. The same applies to margin-top which is calculated by width.

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {  display: block;  position:absolute;  height:auto;  bottom:0;  top:0;  left:0;  right:0;  margin-top:20px;  margin-bottom:20px;  margin-right:80px;  margin-left:80px;  background-color: green;}

<div class="stretchedToMargin">  Hello, world</div>

How to make div 100% width when parent tag has padding?

You could apply a negative margin to the inside container to negate the padding

<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </div>
</body>

setting a margin or padding for a 100% height grid without scrollbars

Use padding instead of margin for selector .container.withMargin:

.container.withMargin {
    padding: 5px;
}

And add box-sizing: border-box for the .container selector.

function toggle() {
    document.querySelector(".container").classList.toggle("withMargin");
}

html,
body,
.container {
    height: 100%;
    margin: 0;
}

.container {
    display: grid;
    grid-template-rows: 50px 1fr 1fr;
    grid-template-columns: 300px 1fr 1fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
    background-color: black;
    box-sizing: border-box;
}

.main {
    grid-area: main;
    background-color: lightcoral;
}

.logo {
    grid-area: logo;
    background-color: lightcyan;
}

.header {
    grid-area: header;
    background-color: lightgoldenrodyellow;
}

.nav-one {
    grid-area: nav-one;
    background-color: lightgray;
}

.nav-two {
    grid-area: nav-two;
    background-color: lightgreen;
}

.container.withMargin {
    padding: 5px;
}

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <div class="container">
            <div class="main">
                <br />
                <button onclick="toggle()">toggle .container margin</button>
            </div>
            <div class="logo">logo</div>
            <div class="header">header</div>
            <div class="nav-one">nav one</div>
            <div class="nav-two">nav two</div>
        </div>
    </body>
</html>

HTML CSS Box with padding and margin and 100% width?

The browser does excacly what you are telling him to do :)
However I think you don't like the overflow it has.

What happens is that your #box expands because of your border and padding. You can make these properties inset, so it does not expand your element. You can do this with box-sizing:

 #box {
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }

However you can not do the same with the margin, because the element is pushing itself from the body: it does what it supposes to do.

You can make a workaround by doing the same thing as above:

body
{
    padding: 20px;
    box-sizing: border-box;
}

You will use the padding on the body instead of the margin on the #box.

jsFiddle

Update

To prevent the double padding space, you should only apply it on the body element (or html, but i prefer the body as that is your visual element in the end).