Some beginner css questions

css

#1

I’ve learned how the CSS box system works but now

  1. when I want to add a width or add a padding to it I wonder what is better to be done earlier? (Assuming I’m not using a “box-sizing: border-box”) I think it makes more sense to first set the padding as it’s part of the box and then set the width, but I’m still confused.
  2. What if I specified the widths and set the margins and set the positions and finally the page layout is all fine, but then I decide to add a little more padding to one of the elements to make it more appealing but that doesn’t fit with other sizings and the whole layout falls apart?
    Thank you all!

#2

1: Setting the width will attempt to set the width ignoring padding, yet the padding could force it to be wider than than width you have set. The order in which you set them does not matter.

2: If you’re setting all of your sizes manually, then yes, one small change will force you to make changes elsewhere. Perhaps try setting widths as percentages, or using the calc() feature. That said, it doesn’t mean your entire layout will fall apart.


#3

Well, that is when “box-sizing: border-box” will come to
the rescue of your fine layout. :winky:

Any change to your layout will be in a vertical rather than
a horizontal direction. :sunglasses:

ccothead


#4

It makes no difference to the result which you set first; both rules will be applied in the same way. If you are not using box-sizing: border-box, then the width will set the width of the contents, and the padding will be in addition to that.

Your layout should not be rigidly designed so that one small change causes everything to break. What happens if a visitor has their default font size set larger than yours? What if you need to add more text at a later date? What if my screen size is different to yours? You need to aim for a fluid design, where things can adjust to accommodate changes. Don’t set widths at all, if you can avoid it. Where you need them, use flexible units like ems and percentage, rather than fixed units like pixels. Consider using min-width and max-width to allow for different screen sizes.

If you’re not already familiar with the idea of responsive design, now would be a good time to learn. smile This article is several years old, but provides a good introduction:

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/