Home › Forums › CSS › Responsive Web Design: When to use px vs. % on margins and padding? › Re: Responsive Web Design: When to use px vs. % on margins and padding?
December 29, 2011 at 4:29 pm
#93648
mikes02
Participant
From what I understand, I set the width via percentage, I don’t touch the height at all, so let’s say I have a 500px width div inside of a 900px container, if I understand correctly the percentage would be:
#sample-div
{
width: 55.55555555555556%; /* 500/900 = 0.5555555555555556 */
}
But then if I want to add 30px of padding to that div, according to the box model the div would be 440px so the new math would be:
#sample-div
{
width: 48.88888888888889% /* 440/900 = 0.4888888888888889 */
}
So if I wanted to have 30px of padding all the way around the div? would it be
#sample-div
{
width: 48.88888888888889% /* 440/900 = 0.4888888888888889 */
padding: 30px 6.81818181818182%; /* 30/440 = 0.0681818181818182 */
}
or would it be percentage all the way around?
#sample-div
{
width: 48.88888888888889% /* 440/900 = 0.4888888888888889 */
padding: 6.81818181818182%; /* 30/440 = 0.0681818181818182 */
}