Auto - Box Model Explanation


#1

Hello,

I am a complete newb at CSS and was wondering if I could have someone explain to me the Auto lesson the CSS Box Model principles. Could someone give me a run down in simple terms so as to finally get what the heck this Auto Centering stuff means?


#2

auto refers to how the property would render if there was no rule at all in the custom style sheet. The browser is preloaded with its own style sheet. That’s how lists know to have padding and bullets, paragraphs know to have a blank line between consecutive paragraphs, table headings know to be centered and bold, etc.

margin: auto 1em;

In earlier iterations of CSS we would have to contain an element in a text-align: center; context before we could apply this rule to the target element.

body {
    font-size: 1em;
}
div {
    text-align: center;
}
div div {
    width: 50%;
    margin: auto 1em;
}

but in today’s browsers that has been addressed so the parent container no longer factors in. Set a width, and give it horizontal margin of auto and it will be self-centering in any width parent.


There are a number of properties that will take auto as the declared value. The best place to find them is W3C (w3.org)… Bear in mind when searching that w3schools has been aggressively SEOing and getting dominant placement in the SERPs, of late. Not a big fan of those guys, especially given we can source out the horse’s mouth.

%search_term% site:w3.org

or

%search_term% MDN

which has excellent interpretation of the documentation, and always has links to W3C

Given they’ve been around nearly 15 years and were the real mainstay proponents of the living standard, (this group includes industry collaboration with Apple, Google, Mozilla, and Microsoft)…

https://whatwg.org/


#3

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