Setting up the Body

Especially for RWD, do you do anything special to set up the ````` container?

For example, would it be good for me to add margins or padding?

I just want to get off to a good start laying out my first responsive home page.

I can see a benefit in adding padding to the body so all of the content in your web pages doesn’t run up to the edge of the viewport, but one downside is that if you have a masthead, then you would need to use negative margins.

I generally start with:

html,body {
    padding:0;
    margin:0;
}
body {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
1 Like
html,body {
    padding:0;
    margin:0;
}
body {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}

What’s that do?

Sets the padding and margin of the page to zero and applies the Microsoft box model behaviour which usually makes handling boxes with borders or padding easier to manage.
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

1 Like

This is all coming out of left field - I don’t understand what this box sizing is or how it relates to my OP. And, yes, I did read your link.

You asked:

That’s what I do.

The link to the article about “box-sizing” was preemptively FYI just in case you didn’t know what box-sizing was for and were curious to find out.

1 Like

I know what the CSS box model is. I don’t know about other box models. It seems like your code throws the traditional box model out the window. That was what my “out of left field” comment was about.

Does this explanation help?

1 Like

setting up margins/padding for the body tag can be a double edged sword, as you yourself have mentioned.
I would see the body tag more apt for setting a typographical base of the most ubiquitous font properties for the page.

From what I read at Mozilla Dev Network, box-sizing is a property which defaults to content-box which would be the “Box Model” that I learned. It defines the size of a box as CONTENT+PADDING+BORDER+MARGIN, right?

Now I guess there is a new option which is border-box which defines the size of a box as the CONTENT+PADDING+BORDER, right?

I guess some people feel that the border-box model is easier to follow since a div that is 350px wide is actually 350px wide!

But that leaves me with these questions…

1.) How does this relate to my OP? (Border-box seems tangential.)

2.) Is border-box supported well enough to use it?

3.) Are there any real benefits to not using the “traditional” Box Model?

4.) What do others think about adding padding and margins to <body>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.