Including Margin for Width and Height

Include padding/margin in width percentage?

you need to :

add box-sizing:border-box to the *,*:before,*:after
fix inline-block gap , you can do that by reset parents font, font-size:0
remove display:inline from .testing-here
add border to .panel-default

*,*:before,*:after {  box-sizing: border-box;}body {  margin: 0}.testing-here {  padding: 2.5px;  font-size: 0}.panel-default {  box-sizing: border-box;  border-style: none;  position: relative;  width: 50%;  padding-bottom: 40%;  /* = width for a 1:1 aspect ratio */  overflow: hidden;  background-color: #446CB3;  border-radius: 0;  display: inline-block;  font-size: 16px;  border: 5px white solid}.panel-body {  color: white;  position: absolute;}

<div class="testing-here">  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div>  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div>  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div>  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div></div>

Margins and % width and height

You can't use margin or paddings without some width or height, you must have some content inside your tag. If you can't change css just give some min-height/min-width in px or give a content. Here is an [example][1]

[1]: http://codepen.io/ostinred/pen/jPQBRW

Does Box Model calculation include margin or not?

"Box model" is what @K.Daniek describes above. However, I have the impression that you want to know which of all these parameters are included in the defined width. This depends on the used box-sizing:

The default is content-box: Here everything adds up: width plus borders plus padding make up the visible outside width of the box (if it's made visible by a border and/or background). The margins are extra - the outside distance to the parent element. (there is the special case collapsing margins, which is an extra thing) So the given width includes nothing else.

With border-box, The given width includes the border and the padding. Again, margins are extra/outside.

With padding-box, The given width includes only the padding, but not the borders. And once more, margins are extra/outside, which they are always (in relation to the defined width).

See also the examples below, which all have the same settings for width, border, padding and margin, but the three different box-sizing possibilities:

body {    background: #fc7;    margin: 0;}#x {/*200px + 2px border + 10px padding = 212px width plus margins */    box-sizing: content-box;    border: 1px solid black;    height: 200px;    margin: 2px;    padding: 5px;    width: 200px;    background: #7fc;}#y {/*200px = 200px width plus margins */    box-sizing: border-box;    border: 1px solid black;    height: 200px;    margin: 2px;    padding: 5px;    width: 200px;    background: #f6f;}#z {/*200px + 2px border = 202px width plus margins */    box-sizing: padding-box;    border: 1px solid black;    height: 200px;    margin: 2px;    padding: 5px;    width: 200px;    background: #cf9;}

<div id="x">content-box</div><div id="y">border-box</div><div id="z">padding-box</div>

div with 100% width including margins

be sure to use box-sizing: border-box when using padding to force the padding to behave like it should. As far as the horizontal padding goes, you can just add padding: 0 3px; to .container

*{ //adds to all elements or you can just add to the ones that use padding
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;    
}

.container{
  border: 1px solid gray;
  padding: 0 3px; <-----add this
}

FIDDLE

Find element height, including margin

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

this does exactly what jquery's outerwidth is doing, scratched from ::http://youmightnotneedjquery.com/
might be interteresting for further develpoment

EDIT: in ie8 you have to use el.currentStyle[prop] instead of getComputedStyle(el);

100% height with margin while keeping width constraints for DIV in CSS

You can use absolute positioning to get the height right:

#child {
    position: absolute;
    top: 50px;
    bottom: 20px;
    left: 0;
    right: 0;
    width: 70%;
    min-width: 300px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

This requires adding position: relative to #parent but if it is the only child of the body then you can avoid it. This takes care of the which I don't want to change for some reasons part of your question.

Demo Here

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>

How to get element width/height with margin, padding, border in Native JavaScript (no jQuery)

If you're only dealing with pixel values for the margin, padding and border properties, you can do the following:

// we're assuming a reference to your element in a variable called 'element'
var style = element.currentStyle || window.getComputedStyle(element),
    width = element.offsetWidth, // or use style.width
    margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight),
    padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight),
    border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);

alert(width + margin - padding + border);

If you're dealing with other kinds of values (like ems, points or values like auto), I would like to refer you to this answer.