Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Russel Klueg
2,813 PointsCreating a Website: Relative vs Exact Values
So I'm new to HTML and CSS but after watching several videos on both subjects, I have a question about using exact values such as pixels compared to percentages when setting spacing.
In all the videos it seems like the author sets px values for margins, padding, and etc but always has to go back and correct this when optimizing for mobile devices. Wouldn't it be easier to and more efficient to set your to x%.
Granted I'm still learning but it would seem to me that there are few cases where setting an exact value with pixels out weighs the benefits of using relative values.
Russel Klueg
2,813 PointsJoe Consterdine, I mean that makes sense that you would want to be consistent but for instance say I have a div in my body. I could set it to a width of 960px or I could set it to say a width of 60%. Why might an author choose to set it to a defined width like that? I can't think of an instance where I, at least personally, wouldn't set my width value to a %.
Is this just something that falls to the author's style?
2 Answers
Joe Consterdine
13,965 PointsHi Russel,
I think everyone who starts learning Web Design probably starts off learning how to make sites using pixels. The reason for this is because making sites using % relates to responsive design which is a little outside the scope for a beginner.
Don't be confused though, you still can and probably use pixels for certain elements on your site.
So take your body width for e.g You're asking why would a developer ever use a 960px width for their body instead of a 80% width lets say. The answer to that is a more experience developer who can make responsive sites probably uses % based widths everytime because he will be creating responsive websites.
In regards a div, then yeah I'd go ahead and create it based on a % width.
I use Bootstrap for a lot of my projects, and that framework is created based off of % widths.
I hope that helped a little bit anyway.
To sum up, a new developer will probably start off with pixels because it's probably a little easier to understand I guess.
You need to know both anyway.
Any more questions please asks.
Thanks :)
Russel Klueg
2,813 PointsYes that answers my question perfectly. My first course ever on html was the How to Make a Website course here at Treehouse. This course focused heavily on using relative values rather than pixels which I really liked. I even started making my own website for practice and to serve as a portfolio later on and focused on using relative values rather than definitive values. Several of the courses since then have focused on defining everything with pixels rather than % and ems/rems and this didn't make sense to me when relative values seemed to work more smoothly, or as you put it responsively. I didn't consider that using pixels might be a thing usually taught to a beginner since the course I took jumped right into relative values.
Joe Consterdine
13,965 PointsHi Russel,
I joined Treehouse after about 5 months of coding practise so I skipped their beginner lessons, so they may well start teaching % units from the beginning.
I think it's good to get in to the habit of using % units as it's crucial to make responsive websites in todays era.
I wouldn't worry about it, just keep learning and it will come naturally. I will sometimes use pixels for things like padding and margin, but on the whole I stick to % values for most things.
Just keep going through the courses and you'll be fine.
Joe
Joe Consterdine
13,965 PointsJoe Consterdine
13,965 PointsHi Russel,
I'm no CSS guru but I think the most important point is to be consistent whether you use px or %. You're also forgetting font-size which I believe is a good way to measure your padding.
For e.g Lets say you have a base font size of 16px set on your body, and you set a base line-height of 1.5. Your line height is 16px x 1.5 = 24px because 16 x 2 is 32 pixels and we're only doing 1.5.
So now if you used padding-bottom: 24px the empty space this creates will be exactly the same height as the lines above.
But to put it simply, using px is fine for padding I do still quite a lot. Just be consistent so every element has the same, obviously from time to time you might have to stray away from that.
Joe