How to Set the Margin or Padding as Percentage of Height of Parent Container

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

Margin-top percentage not relative to parent

Vertical padding and margin are relative to the width of the parent. Top and bottom on the other hand are not.

Try to place a div inside another. Use the top property (for example: top: 25%) and make sure you specify a position (e.g. position: relative;)

I've forked and adjusted your code example to demonstrate what I mean: https://codepen.io/anon/pen/Yaqmva

top: 5%;
position: relative;

CSS height: [percentage] behaviour using margin and/or padding

Interesting... but I think the problem isn't about vertical height, they all displayed correctly on my browser (height was always relative to parent's height), it is padding and margin that measure to parent's width always, after research though, I found this:

In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width,

http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

Good catch, I never knew :)

CSS % for vertical margin based on width instead of height

Use top instead of margin-top, without calc, also add left: 50%; and add transform: translate(-50%, -50%) to move it back by half of its own height and width. This also requires to use absolute position on the child and relative position on the parent:

#accountOrder {
    width: 400px;
    float: left;
    height:100%;
    text-align: center;
    position: relative; /* added */
}
#accountOrderButton {
    position: absolute; /* added */
    width: 100px;
    height: 20px;
    top: 50%;  /* changed */
    left: 50%; /* added */
    transform: translate(-50%, -50%); /* added */
    padding: 20px;
    background-color: <?php echo $data['secondary_color']; ?>;
    border-radius: 10px;
}

CSS height set to percent, is it relative to the parents content box, or padding box, etc

The % based size of the child is indeed calculated with respect to the size of the parent, and it does take into account box-sizing.

See this demo:

.box {  width: 100px;  height: 100px;    padding: 10px;  margin: 10px;  border: 10px solid black;    background-color: red;  color: white;}
.content-box {  box-sizing: content-box;}.border-box {  box-sizing: border-box;}
.child {  width: 100%;  height: 100%;  background-color: blue;}

<body>  <div class="box content-box">    <div class="child">Content Box</div>  </div>    <br/>
  <div class="box border-box">    <div class="child">Border Box</div>  </div></body>

Setting child's height when parent's height is set via padding-top

use position,
padding will only add space of aspect ratio - so you need to use position:a bsolute to content to ignore this space and position:relative to parent to be able to position it as you intend

.container {    width: 100%;    height: 100%;    /*margin: 5px;*/    position: relative;    outline: 1px dotted green;}
.parent {    position:relative;    width: 50%;    height: auto;        outline: 1px solid black;    }.parent:after {    content: '';    display: block;    clear: both;    padding-top: 50%; /*15*/  }
.child {    float:left;    width: 40%;    height: 40%;    outline: 1px dashed red;   }.content {  position:absolute;  width:100%;  height:100%;}

<div class="container">    <div class="parent">      <div class="content">        <div class="child">Child</div>      </div>    </div></div>

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 Set the Margin or Padding as Percentage of Height of Parent Container