{"id":1413,"date":"2020-08-14T16:45:10","date_gmt":"2020-08-14T16:45:10","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1413"},"modified":"2020-08-14T16:45:10","modified_gmt":"2020-08-14T16:45:10","slug":"what-does-100-mean-in-css-2","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1413","title":{"rendered":"What does 100% mean in CSS?"},"content":{"rendered":"\n

One of the CSS units I use most is the wonderful %<\/strong> \u2014 so handy for positioning elements on the page.<\/p>\n\n\n\n\n\n\n\n

Unfortunately, the rules aren\u2019t exactly straightforward. One question I\u2019m always asking myself is:<\/p>\n\n\n\n

Percent of what<\/em>?<\/p><\/blockquote>\n\n\n\n

Hopefully this guide can help clear things up.Just give me the gist!<\/a>#<\/a><\/p>\n\n\n\n

The basics: width & height<\/h2>\n\n\n\n

In these examples, the purple box is our lovely self element \u2014 this is the element we\u2019re trying to position using CSS properties. The surrounding blue box is the parent element.It\u2019s important to note that the self element is absolutely<\/code> positioned, to take it out of the normal flow and prevent moving things as we\u2019re poking around.<\/p>\n\n\n\n

Let\u2019s start with our most basic, and most straightforward, example: width<\/code> and height<\/code>. Move the sliders around to get a feel for how the width and height of our self element changes with different percentage values.height50% (100px)width50% (300px)200px600px.self {<\/code> position: absolute;<\/code> height: 50%;<\/code> width: 50%;<\/code>}<\/code><\/p>\n\n\n\n

We can see that our element\u2019s width<\/code> and height<\/code> are based on our parent\u2019s width<\/code> and height<\/code> (respectively).#<\/a><\/p>\n\n\n\n

top & left<\/h2>\n\n\n\n

Great! Seems pretty straightforward \u2014 let\u2019s move on to left<\/code> and top<\/code>:height50% (100px)width50% (300px)top0% (0px)left50% (300px)200px600px.self {<\/code> position: absolute;<\/code> height: 50%;<\/code> width: 50%;<\/code> top: 0%;<\/code> left: 50%;<\/code>}<\/code><\/p>\n\n\n\n

These values are also based on our parent\u2019s width<\/code> and height<\/code>. If an element has a left<\/code> value of 50%<\/code>, its left side will sit halfway across its parent component.#<\/a><\/p>\n\n\n\n

margins<\/h2>\n\n\n\n

What about margin<\/code>s?height50% (100px)width50% (300px)margin top0% (0px)margin left50% (300px)200px600px.self {<\/code> position: absolute;<\/code> height: 50%;<\/code> width: 50%;<\/code> margin-top: 0%;<\/code> margin-left: 50%;<\/code>}<\/code><\/p>\n\n\n\n

margin<\/code>s work similarly to our last example \u2014 they are based on the size of their parent. However, there is one weird thing here that is important to note:<\/p>\n\n\n\n

margin-top<\/code> is based on our parent\u2019s width<\/em>, not height<\/strong> (and the same goes for margin-bottom<\/code>). In other words, all margin<\/code>s are a percent of their parent’s width.#<\/a><\/p>\n\n\n\n

padding<\/h2>\n\n\n\n

And what about padding<\/code>? Should be the same as margin<\/code>, right?height50% (100px)width50% (300px)padding top0% (0px)padding left50% (300px)200px600px.self {<\/code> position: absolute;<\/code> height: 50%;<\/code> width: 50%;<\/code> padding-top: 0%;<\/code> padding-left: 50%;<\/code>}<\/code><\/p>\n\n\n\n

And it is! For the most part.<\/p>\n\n\n\n

Something interesting you might notice here is that padding-left<\/code> (for example) won\u2019t change the width<\/code> of our self element, unless the padding-left<\/code> value is greater<\/em> than our self element\u2019s width<\/code>. This is because I use the border-box<\/code> box-sizing<\/code> model. Unfamiliar, or need a recap? Read more on MDN.<\/a>#<\/a><\/p>\n\n\n\n

transform: translate<\/h2>\n\n\n\n

Okay! Here is where things get a bit… weird.<\/p>\n\n\n\n

Let\u2019s take a look at transform: translate<\/code>:height50% (100px)width50% (300px)translate top0% (0px)translate left50% (150px)200px600px.self {<\/code> position: absolute;<\/code> height: 50%;<\/code> width: 50%;<\/code> translate-top: 0%;<\/code> translate-left: 50%;<\/code> transform: translate(50%, 0%);<\/code>}<\/code><\/p>\n\n\n\n

The box moves a lot more slowly this time, right? That\u2019s because transform: translate<\/code> percentage values are based on our self element\u2019s<\/code> width<\/code> and height<\/code><\/strong>.#<\/a><\/p>\n\n\n\n

TLDR<\/h2>\n\n\n\n

Let\u2019s recap what we\u2019ve learned:heightparent\u2019s heightwidthparent\u2019s widthtopparent\u2019s heightleftparent\u2019s widthmargin-topparent\u2019s widthmargin-leftparent\u2019s widthpadding-topparent\u2019s widthpadding-leftparent\u2019s widthtranslate-topself\u2019s heighttranslate-leftself\u2019s width<\/p>\n\n\n\n

Now let\u2019s put what we\u2019ve learned to the test!#<\/a><\/p>\n\n\n\n

Centering elements<\/h2>\n\n\n\n

How could we center an element inside its parent, no matter its own dimensions?<\/p>\n\n\n\n

Try centering our self element inside of the parent. Make sure it doesn\u2019t move around when you tweak its width<\/code> and height<\/code>.height50% (100px)width50% (300px)top0% (0px)left50% (300px)translate top0% (0px)translate left50% (150px)200px600px.self {<\/code> position: absolute;<\/code> height: 50%;<\/code> width: 50%;<\/code> top: 0%;<\/code> left: 50%;<\/code> translate-top: 0%;<\/code> translate-left: 50%;<\/code> transform: translate(50%, 0%);<\/code>}<\/code>Show me!<\/p>\n\n\n\n

See how this works? We\u2019re moving our self element:<\/p>\n\n\n\n

  • down<\/em> by 50% of our parent\u2019s height using top: 50%<\/code><\/li>
  • right<\/em> by 50% of our parent\u2019s width using left: 50%<\/code><\/li>
  • up<\/em> by 50% of our self element\u2019s height using transform: translate (top): -50%<\/code><\/li>
  • left<\/em> by 50% of our self element\u2019s width using transform: translate (left): -50%<\/code><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"

    One of the CSS units I use most is the wonderful % \u2014 so handy for positioning elements on the page.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[105],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1413"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1413"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1413\/revisions"}],"predecessor-version":[{"id":1414,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1413\/revisions\/1414"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}