CODEWITHSUNDEEP
htmlcss
Kali Charan Rajput
Kali Charan Rajput

Reputation: 12596

use "px" and "%" both for one element

is this right to use "px" and "%" both for one element like 

.box{
padding:10px 2% 0 3%;
}

is this right to use in css.

Upvotes: 3

Views: 302

Answers (5)

Vincent Robert
Vincent Robert

Reputation: 36120

As stated in the CSS 2.1 specification for padding (emphasis mine)

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

So padding: 10px 2% 0 3%; is equivalent to 

padding-top: 10px;
padding-right: 2%;
padding-bottom: 0;
padding-left: 3%;

This is perfectly valid CSS.

Have fun!

Upvotes: 3

Kobi
Kobi

Reputation: 138007

Yes. This is just a short form for:

padding-top: 10px;
padding-right: 2%;
padding-bottom: 0;
padding-left: 3%;

The code is valid - you are using different units for different properties. Nothing wrong with that.

Upvotes: 0

Ben Everard
Ben Everard

Reputation: 13804

Like the others had suggested, mixing different units of measurement is fine, but to go further I would not worry about keeping them all the same UOM, you might have different positioning requirements on the top, right, bottom and left values of an element.

Upvotes: 1

corroded
corroded

Reputation: 21564

its ok to use different measurements(browsers wont complain) but it's better to just use the same measurement. (all percentages or all pixels)

Upvotes: 0

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

Yes, you can mix percentages and pixel values quite fine. Does it not do what you expected it to do?

Upvotes: 0

Related Questions