---
id: bad82fee1322bd9aedf08721
title: Understand Absolute versus Relative Units
challengeType: 0
videoUrl: ''
localeTitle: Entenda Unidades Absolutas versus Unidades Relativas
---
## Description
Os últimos vários desafios definem a margem ou preenchimento de um elemento com pixels ( px
). Os pixels são um tipo de unidade de comprimento, que é o que informa ao navegador como dimensionar ou espaçar um item. Além do px
, o CSS tem várias opções de unidades de comprimento diferentes que você pode usar. Os dois tipos principais de unidades de comprimento são absolutos e relativos. Unidades absolutas se ligam a unidades físicas de comprimento. Por exemplo, in
e mm
referem-se a polegadas e milímetros, respectivamente. Unidades de comprimento absoluto se aproximam da medida real em uma tela, mas há algumas diferenças dependendo da resolução de uma tela. Unidades relativas, como em
ou rem
, são relativas a outro valor de comprimento. Por exemplo, em
se baseia no tamanho da fonte de um elemento. Se você usá-lo para definir a própria propriedade font-size
, ela será relativa ao font-size
da font-size
do pai. Nota
Existem várias opções de unidades relativas que estão ligadas ao tamanho da janela de visualização. Eles são abordados na seção Princípios de design da Web responsivo.
## Instructions
Adicione uma propriedade padding
ao elemento com a classe red-box
e defina-a como 1.5em
.
## Tests
```yml
tests:
- text: Sua classe de red-box
deve ter uma propriedade de padding
.
testString: 'assert($(".red-box").css("padding-top") != "0px" && $(".red-box").css("padding-right") != "0px" && $(".red-box").css("padding-bottom") != "0px" && $(".red-box").css("padding-left") != "0px", "Your red-box
class should have a padding
property.");'
- text: 'Sua classe de red-box
deve fornecer elementos de 1,5n de padding
.'
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), "Your red-box
class should give elements 1.5em of padding
.");'
```
## Challenge Seed
```html
margin
padding
padding
```
## Solution
```js
// solution required
```