padding in em and px

Engaged ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

Hi,

Q1. (red arrows)

I set each for em and px

padding: 0.5em 1.5em;

padding: 8px 24px;

Where does the difference come from?

I think the second button shoul be like the first one.

Q2. (blue arrow)

How to make a enough space between the paragraph and the button.

Link

EmRem-Church

Hosun Kang

IMG_0525.JPG

Views

165

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 22, 2019 May 22, 2019

Hosun  wrote

Hi,

Q1. (red arrows)

I set each for em and px

padding: 0.5em 1.5em;

padding: 8px 24px;

Where does the difference come from?

I think the second button shoul be like the first one.

Q2. (blue arrow)

How to make a enough space between the paragraph and the button.

Link

EmRem-Church

Hosun Kang

The second button will never be like the first one because you have explicitly set the padding in px and that never changes from device to device, it will always default to the specified px padding, unless you

...

Likes

Translate

Translate
Community Expert ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

This is very easy to explain.

px is an absolute dimension

em is a relative dimension related to the size of the font of its predecessor

rem is a relative dimension related to the size of the root font

Change the em to rem in the style rules for .btn-em to see the difference

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

LATEST

Hosun  wrote

Hi,

Q1. (red arrows)

I set each for em and px

padding: 0.5em 1.5em;

padding: 8px 24px;

Where does the difference come from?

I think the second button shoul be like the first one.

Q2. (blue arrow)

How to make a enough space between the paragraph and the button.

Link

EmRem-Church

Hosun Kang

The second button will never be like the first one because you have explicitly set the padding in px and that never changes from device to device, it will always default to the specified px padding, unless you specifically change it using a media query.

I always use px because I personally find em and rem too freaking complex and I don't always want elements to be sized in 'ratio-aspect' to each other on smaller devices so I go in, look at the layout visually and then apply a size I think looks correct. But thats just me.

Its a little more work but I think the overall result looks more pleasing

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines