Does padding need to be done in % as well, for responsive design?
Nope. In fact, I rarely use percentage for padding (or margin) unless it has a specific advantage. 
EMS are better for padding
I respectfully disagree.
Ems are based entirely on font size. If there’s no font size specified for an element, the em unit becomes whatever the browser’s default font size is. This is terribly inefficient, and can cause massive headaches down the road. 
Here’s why using ems is so problematic:
Suppose you have a document containing three text blocks. Each text block has a different font size—say 30px, 20px, and 15px. If you prefer to use ems here, that’s fine. We’re just creating three different font sizes.
Now let’s say you need to add left padding to these elements. If you add 10px left padding to each element, they scoot over uniformly:
But what about changing different elements using ems? Well, suddenly the process is much more intense. No longer do you have a uniform way of approaching padding across different elements. If you have any font sizes applied to an element, using ems will mean that font size will be used as a basis for the padding. No good. 
Here’s what the same three elements look like when set to 1em for left padding:
As you can see, the 1em left padding on each element is entirely dependent on the font size. Pixels are fine. Percentages are fine. High pixel density displays automatically resize this content anyway, meaning px measurements are normalized for the PPI. Having said that, there are many great uses for ems. But I would not consider padding one of them. 
4 Likes
I appreciate your deep and thorough response, and see it comes from a background of deep knowledge in web development; which i dont have.
There are severe questions to be raised to your answer of '% isnt totally necessary for padding or margin"
For Margin–>
A. I developed most of my website using margin, and its backfired on me. Because PX doesnt translate the same on other devices. 1px on small phone means more then 1px on big desktop.
-----------------------------Bolded statement Correct, or incorrect?--------------------------
So its better to use %.
B. Because % also wraps better across devices in reference to the child elements (Set to %) that are within the parent div.
You go to tablet, you see “ah, look, this parent div, it was set at 80%, so now it stays at 80% from desktop to tablet, and all those child elements inside of it, they were also set at %, so they are relative to the parent div, so they also dont require any adjusting.”
---------Thus, then, % gives efficiency as well. Correct, or incorrect?-----------------
As for padding–
I apply the same reasoning as above.
Thanks for helping, I look forward to your response and am open to correction.
-Elliot
You are right about that. 
Rigid pixels, especially when we’re dealing with larger site elements, are a recipe for disaster. But when it comes to many types of padding, like near the left and right edges of a container, pixels can provide a more consistent visual. I put together a quick example of this below:
There is no right or wrong way to do this. Like tools in your garage, it helps to have a number of options available for specific tasks. To say that one way or another is right or wrong is like saying you can only build a chair using a chainsaw and a screwdriver. The best outcome usually results from a thorough understanding of each tool and the appropriate usage that best suits the objective. 
2 Likes
Splendid; your thoroughness and smooth, rapid design formulation is impressive.
Would we then come to the following conclusion:
Item 1—-------> I assume it is best to use %-based padding for desktop, because the desktop / laptop monitor could be a whole variety of sizes.
So if we used PX padding, then it would be great for a ‘Large desktop’, but for a LAPTOP, it would be TOO MUCH padding.
Item 2—--------> And when we come to the phone… either:
- Change the percent that you used for desktop; make it bigger % for phone.
- Change the percent to pixels
Questions: ** → Item 1 Correct?
> **Are points 1 and 2 in Item 2 correct?
___
Separate matter: Does our conversation around the subject of padding, apply completely to the subject of Margin as well? (or are there exceptions)
-
Again, this is generalizing, but for most purposes, I use the same padding for desktop/laptop size screens. Keeping the content from spanning 2,500 pixels, though, is a challenge. Adding padding to the sides is one way of doing that, but it’s not very efficient. I recommend wrapping the whole document under a wrapper element which is centered and set to a width of 100% with a max-width of, say, 1,600 pixels. This ensures that larger desktop displays aren’t overly stretched. You can see this wrapper in my YouTube example in the previous post.
-
That is one way to do it. The goal here is to have something smooth that functions uniformly across various browsers and devices. Your suggested approach here does work, but for me—and I have to emphasize that this is just for me—I tend to get frustrated if I’m having to change formats and measurements everywhere between device widths.
Re: your separate matter question: It can apply to margin, but margin is one of those things that’s often used interchangeably with padding. In the case of vertical margins, you can get into trouble because these can collapse. (See this) Especially when dealing with vertical spacing, I prefer to use padding on a parent object to “push down” the child object, as opposed to using top-margin on the child object to “push away” from the parent.
Edit: By the way, @Elliot, I really love the way your posts are organized into chunks. It’s a nice way to keep the conversation flowing and to make sure we can hit on every point.
Thank you for complementing the way i organize information, its inspired me to go deeper down that vein, which is why compliments help people.
At this point, I find that I am grappling with multiple suggestions that will:
- Require me to insert containers and change the entire structure of the website
- Nullify all the work I just did, which involved changing all of the margins to %.
Instead, now, you appear to suggest that I remove the margins entirely, and replace them with padding.
Q1 (please enter website and analyze it, to provide best solution).
Is item 1 necessary? Can I ‘get away’ with what I have right now? To be specific, is Item 1 necessary just for desktops, and I can disregard for other devices? If that is the ask, I could find a padding or margin-based solution that circumvents the need to add containers.
https://preview.webflow.com/preview/dogwalkerextracom?preview=fad14ef9cf7c35af8542fd6199b44902
Q2 (please enter website and analyze it, to provide best solution).
Can I ‘get away’ with the % + Margin-based formatting that I used on the following pages:
Home, About DWE, Sharing with Clients, Service Area.
Q3. My method is to re-format every page on desktop first (because something is wrong…. I need to:
a. Make every margin %
b. Remove margins, make padding %
c. ?
……………………….And once I have reformatted every page on desktop, I am turning to tablet, then mobile.
When I turn to tablet, what is the best approach to take?
Please integrate this answer with the answer for Q2, so I can have the most efficient OVERALL PROCESS as possible. (as you said, its “frustrating to make changes again on other devices”)
So, the recommended course of action that you give for desktop (changing margin to %? Changing margin to px? Changing padding… (etc.) needs to TRICKLE down to the other devices, so I spend less time doing extra measurement reformatting.
With any matter, there are 'exceptions, each person likes to do things differently… Can you provide me with your direct, best solution for each matter, regardless of ‘exceptions, some people like to do this…’
____-
__
_
As I await your response, I must move forward… Ill be changing all desktop pages to Margin-based %.
…and I’ll be ready to go back to those pages and replace margin-based % with padding if it is best to do that
If you are talking about padding from the edges of the browser for text/images, what I do is from tablet and below I set my padding on my sections to 5%. This allows the distance from the edges of the screen to remain relative. On desktop, I don’t apply any padding to sections since I usually use containers or a manual container with 1200px width. As far as other types of padding goes, I use pixels almost exclusively and if something gets weird on other devices, I just adjust that media query.
For your site, you can see on the top section, the text doesn’t line up on the left because of margins. Your site is also set to the left for some reason on larger browsers. I suggest putting your content into containers to keep it centered in all browsers.
You also may want to clean up your styles before publishing, you have 153 unused styles.
1 Like
Notes in video:
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.