BEST PRACTICE: always 100px from left and right of page?

[ChenXiu]

I always want 100px from left and right, no matter how much the browser is resized.
I currently have: html { padding-left: 100px; padding-right: 100px; }Is this the best way?
Is this the best way?

Comments:
1.) Putting it in "body{" works the same.
2.) Using "margin-left: 100px; margin-right:100px;" works the same.
3.) Setting body and html to margin:0; padding:0; and putting 1 big div in the body with 100px padding/margin works the same.

With so many ways, what is the "accepted Best Practices" way of doing this?

My html pages are super simple: just 4 rows!
1st row: header links. 2nd row: big logo. 3rd row: big paragraph. 4th row: footer links.

Thank you.

[requinix]

The only real "best practice" is to use as little and as simple CSS as necessary to get the desired end result.

The two main answers here are typically either (a) padding on the HTML or (b) margin on the BODY. You could use DIVs but that tends to make it more complicated. Which you use depends on the rest of your CSS, especially whether you already do anything to the HTML and/or BODY elements, but a margin on the BODY tends to conflict less with other styling.

[Strider64]

I would look into using Grids and/or Flexbox. I personally like grids and once you learn it then you find out how simple it can be in my opinion.

[Barand]

Do you still want to lose 200px on the margins when it's being veiwed on a narrow phone screen? Something to consider.

[ChenXiu]

@requinix, thank you, that sounds the simplest. Also, your response made me further investigate the difference between padding and margin. I'll definitely go with margin (for housekeeping reasons, I'll set html to margin:0 padding:0 also).

@Strider64, I was learning about those a few days ago, I don't think I'm "at that knowledge level" to implement those yet. But thank you for the suggestion.

1 hour ago, Barand said:

Do you still want to lose 200px on the margins when it's being veiwed on a narrow phone screen? Something to consider.

@Barand, thank you for pointing that out. I didn't even think of that. After I read your response, I stuck this into my stylesheet to tide me over:

@media all and (max-width:600px) {
  html, body { margin:0;padding:0;text-align:center; }
}

... however, this "fix to tide me over" seems to work and look really well. So maybe that's okay

At one point, I tried making everything "responsive" using "vw" and various "stretchy" css, but it crossed the line between "this is how I want my website to look" and "let's please everybody in the world."

ALSO IF ANYBODY WANTS TO COMMENT ON THIS:
I am finding CSS annoying sometimes. For example if I want to vertically center 3 items in a row and maybe have 2 of those items grouped together on the right, I have to implement an absolutely RIDICULOUS TANGLED mess of nested upon nested divs, floats, or flexes, blah blah blah, when all I need is a good ol' fashioned <table><tr><td>.
I'd like to go "PURE CSS" but I can't bring myself to replace some of the simple <table> code with 100 lines of CSS code. You should see the crazy hour-long youtube tutorials how to spend days making 2 damn items line up side by side when all you need is a <td valign="center"> that still works on all browsers 😀 I'm open to anyone yelling at me for this. I'm easily persuaded by the experts here :-)

Edited June 25, 2021 by ChenXiu

[requinix]

1 hour ago, ChenXiu said:

(for housekeeping reasons, I'll set html to margin:0 padding:0 also)

Also known as a CSS reset. Not as common nowadays since browsers have been better at getting their acts together, but still around.

 

1 hour ago, ChenXiu said:

For example if I want to vertically center 3 items in a row and maybe have 2 of those items grouped together on the right, I have to implement an absolutely RIDICULOUS TANGLED mess of nested upon nested divs, floats, or flexes, blah blah blah

If you want something that feels like a table then you probably want the Grid layout that Strider64 mentioned. Flex and CSS 3 also have some tricks you may not be aware of.

[maxxd]

14 hours ago, ChenXiu said:

For example if I want to vertically center 3 items in a row and maybe have 2 of those items grouped together on the right, I have to implement an absolutely RIDICULOUS TANGLED mess of nested upon nested divs, floats, or flexes, blah blah blah, when all I need is a good ol' fashioned <table><tr><td>.

Yeah, you want flexbox.

There's also the idea that HTML should be semantic and a table should be used for tabular data output only. I don't know for sure that Google penalizes non-semantically correct HTML because Google prides themselves on not letting anyone know how they rank sites, but anecdotal evidence points to that being the case.

[maxxd]

Additionally - grid is also fantastic, but in my experience a bit more difficult to wrangle. Grid and flexbox are pretty much made to be used together and can do most anything...