FAQ: The Box Model - Auto


#1

This community-built FAQ covers the “Auto” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Auto

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

In the CSS course Learning CSS The Box Model, on Lesson 10: Auto, using it to center text, couldn’t you do the same thing with text-align: center; What is the difference and what situations would you use either one.


#3

In the second example mentioned in this exercise the width has been set to 400px.
As a result the div will center the element greater than 400px in a content.

How is that possible? I thought the width is until 400px?


#4

Good question!

I guess it is again a way of differentiating between HTML and CSS.

Does anyone know the correct answer?


#5

The containing element can never be smaller than the 400px set width of this element. When the containing element is greater than 400px, the box will be centered horizontally no matter what the width of the outer one.

margin: 0 auto;

versus

text-align: center;

Margins do not affect text alignment. We can center the element but not have an effect on text it contains. If we use text-align on the parent to align boxes it contains, that will also have an effect on the text in the boxes.


#6

Why is it not possible to center an element that takes up the full width of the page? Wouldn’t that just make the element appear in the exact center of the webpage?


#7

If it spans the full width how do add margins on either side? All we can do in that case is to center the content within it.

<p>Some text</p>

The above will span the page with the text at the left edge. Giving a text-align: center; rule will center the text.

<p style="text-align: center">Some text</p>

although a style sheet would be preferred…

p {
    text-align: center;
}

We can also use the <center></center> element to wrap the text node:

<p><center>Some text</center></p>

However, WCAG 1.0 advises otherwise…

Use ‘text-align: center’ instead of the deprecated CENTER element.


#8

If you’re using a border-box though, wouldn’t that solve the issue of factoring in the margins?


#9

There would be no margins if the element itself spans the entire width. All block level elements default to 100% and border-box would have the same effect it has on narrower widths.