Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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?

#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 */
}