Set Line-Height as a Percentage Relative to the Parent Element

Set line-height as a percentage relative to the parent element

Here's another way to center an element vertically. I came across this technique some time ago. Basically it uses a pseudo element and vertical-align: middle.

.block::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

line-height as a percentage not working

line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc).

percentage height to child inside of parent element with view port height does not work

There are two issues preventing your code from doing what you want:

1. Class names cannot contain certain characters, like percent signs and as user 3in0 mentioned - square brackets which can be confused with the CSS attribute selector.
2. Percentage heights are based on the parent's height, but not it's min/max height, which are not factored into the calculation. I assume you are using min-height given the classname, so your 90% child height will be 90% of auto (inital/default value). Auto essentially means 'whatever height you need' - 90% of auto = auto.

.min-h-80vh {
  background-color: seagreen;
  height: 80vh;
}

.h-90 {
  background-color: coral;
  height: 90%;
}

<div class="min-h-80vh">
  <div class="h-90">test</div>
</div>

Line-height doesn't change relatively (based on the size of its parent div)

Unitless values: use this number multiplied
by the element's font size

line-height: 1.5;

so it will be 150% of your elements font-size and will increase if you increase the font-size but while using px the line height will stay 30px even if you increase the font size of your element.

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)

is line-height:1 equivalent to 100%?

The real reason is that the way they work is different and it can be understood by having a look at the W3C Specs for line-height and inheritance. The below is what the spec for line-height says about the unitless value (<number>) and the percentage value.

<number> - The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

<percentage> - The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal

As BoltClock points out in his comment (correctly, as usual), inheritance always works the same way and it is always the computed value that gets inherited. The confusion with wordings was because I was referring to an older version of the spec whereas the new one is very clear and is using the right words.

When unitless value (number) is specified, the specified value for line-height is the number which is also the computed value. So, h1 (child) inherits the number which is 1 but it still needs to resolve this number into an actual line-height that can be used. So, the used value is calculated based on specs by multiplying the inherited factor with the h1 element's font-size (which is 2em = 32px) and sets line-height as 32px.

For the percentage, the computed value for line-height at body is 100% of body's font-size (which is 16px) and so is equal to 16px. Now since this 16px is the computed value, the h1 child inherits this value and uses it as-is because there is no need for further resolutions.

This is the reason why there is a difference between the two snippets as in one the line height for the h1 is 16px and in another it is 32px.

---

If we set the line-height: 100% directly at h1 then we can see that the outputs match because now the h1 calculates its own line-height as 100% of 2em (or 32px) which is same as 1 * its font-size.

h1 {
  line-height: 100%;
}

<h1>
  Hello <br> world
</h1>

Make an element with set size responsive to parent element

This can be done with aspect ratio. Let's have a look:

SCSS:

.iphone__outer {
  width: 416px;
  height: 850px;
  background: url("//image.ibb.co/ktWBMS/iphone6_portrait.png") center center no-repeat;
  background-size: 416px 850px;
  position: relative;
  .iphone__inner {
    background: #ffffff;
    position: absolute;
    top: 86px;
    left: 20px;
    width: 375px;
    height: 667px;
  }
}

@media (max-width: 767px){
  .iphone__outer {
    height: 0;
    position: relative;
    padding-bottom: 196%;
    width: auto;
    background: url("//image.ibb.co/ktWBMS/iphone6_portrait.png") center center no-repeat;
    background-size: 100% 100%;
    .iphone__inner {
      background: #ffffff;
      position: absolute;
      top: (100%*86/850);
      left: (100%*20/416);
      width: (100%-((100%*20/416)*2));
      height: (100%-((100%*86/850)*2));
      right: (100%*20/416);
      bottom: (100%*86/850);
    }
  }
}

Also notice that SCSS can actually calculate your needed percentages as you can see above.

Working fiddle.

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;

---

Related Topics