Highlighted

padding in em and px

Engaged ,
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

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

Views

97

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

padding in em and px

Engaged ,
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

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

Views

98

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
May 22, 2019 0
Adobe Community Professional ,
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


Ben

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
Reply
Loading...
May 22, 2019 2
LEGEND ,
May 22, 2019

Copy link to clipboard

Copied

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
Reply
Loading...
May 22, 2019 2