--- id: 614884c1f5d6f30ab3d78cde title: Step 53 challengeType: 0 dashedName: step-53 --- # --description-- Assegna agli elementi `.formrow` un margine superiore e un padding a sinistra e a destra. Gli altri valori di padding dovrebbero essere `0`. Quindi, aumenta la dimensione del carattere per tutti gli elementi `input`. # --hints-- Dovresti usare il selettore `.formrow` per selezionare gli elementi `.formrow`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow')); ``` Dovresti dare a `.formrow` una proprietà `margin-top` di almeno `1px`. ```js const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop; let valInPx = 0; if (/^\d+rem$/.test(val)) { valInPx = remToPx(Number(val.replace('rem', ''))); } else if (/^\d+em$/.test(val)) { valInPx = emToPx(Number(val.replace('em', ''))); } else { valInPx = Number(val?.replace('px', '')); } function emToPx(em) { return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); } function remToPx(rem) { return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); } assert.isAtLeast(valInPx, 1); ``` Dovresti dare a `.formrow` una proprietà `padding-top` di `0`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px'); ``` Dovresti assegnare a `.formrow` una proprietà `padding-right` di almeno `1px`. ```js const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight; let valInPx = 0; if (/^\d+rem$/.test(val)) { valInPx = remToPx(Number(val.replace('rem', ''))); } else if (/^\d+em$/.test(val)) { valInPx = emToPx(Number(val.replace('em', ''))); } else { valInPx = Number(val?.replace('px', '')); } function emToPx(em) { return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); } function remToPx(rem) { return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); } assert.isAtLeast(valInPx, 1); ``` Dovresti dare a `.formrow` una proprietà `padding-bottom` di `0`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px'); ``` Dovresti dare a `.formrow` una proprietà `padding-left` di almeno `1px`. ```js const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft; let valInPx = 0; if (/^\d+rem$/.test(val)) { valInPx = remToPx(Number(val.replace('rem', ''))); } else if (/^\d+em$/.test(val)) { valInPx = emToPx(Number(val.replace('em', ''))); } else { valInPx = Number(val?.replace('px', '')); } function emToPx(em) { return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); } function remToPx(rem) { return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); } assert.isAtLeast(valInPx, 1); ``` Dovresti usare un selettore `input` per selezionare gli elementi `input`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('input')); ``` Dovresti dare agli `input` un `font-size` maggiore di `13px`. ```js const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize; let valInPx = 0; if (/^\d+rem$/.test(val)) { valInPx = remToPx(Number(val.replace('rem', ''))); } else if (/^\d+em$/.test(val)) { valInPx = emToPx(Number(val.replace('em', ''))); } else { valInPx = Number(val?.replace('px', '')); } function emToPx(em) { return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); } function remToPx(rem) { return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); } assert.isAtLeast(valInPx, 13); ``` # --seed-- ## --seed-contents-- ```html