FAQ: The Box Model - Auto

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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

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!

1 Like
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.

1 Like
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?

2 Likes
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.

1 Like
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.

10

I understand using ‘margin: 0 auto’ removes top/bottom margins, and adds margins left/right to automatically center an element horizontally, but why doesn’t ‘margin: auto 0’ (reversing the command) center an element vertically instead?

11

An age old question, and one that you’ll get a multitude of answers to. It’s also the reason we have Flexbox and Grids, since in native form, CSS takes quite a beating (as in the layout author).

The document will flow where it can and stretch all the vertical limits it needs to. Horizontal is easy to control. Set the width, and Bob’s your uncle. Height is not such an easy thing to regulate, though we do have overflow fallback if a container has a set height.

We’ve brought down a document of indeterminant size and are expected to render it, by whatever style configurations we may have contrived.

It’s like a bucket of paint that we throw at the browser and let it sort out which pixels get it. Only we do help it along by structuring and directing presentation.

12

Sorry but i didn’t find out how to ask my own question so i just used reply.
Why do we need to give a width to the element for CSS to be able to center the element from the left and right borders of its container using the ‘‘auto’’ value? Because if we just use the ''margin-left" and “margin-right” properties we can do it without giving a width property to the element.

13

margin is fixed to whatever we set it. auto is not fixed but creates equal margins on both sides. The alternative is to use percentages for the margins but this also has an effect on container width when the browser is re-sized. auto handles this much more cleanly without affecting the container width if it is fixed.

There is a fine line that separates the two methods, as both are valid. Design preferences factor into our choice to use one over the other. There is no one better way.

Bottom line, be sure to test your document in all manner of device sizes to be sure the layout doesn’t break (responsive design), or at least breaks gracefully (adaptive design).

14

I was playing around a bit and tried to set the style to this:

#main {
padding: 40px;
text-align: center;
width: 400px;
margin: 1 auto;
}

I was quite surprised that the whole box was moved to the left no matter the number it was (1, 10, 100). Does that mean I cannot use different number than zero?

15

Not exactly, no. It means CSS does not recognize the number if it has no unit. All numbers must have a unit, save for zero. Since zero is undefined, it has no unit that can be applied (logically).

margin: 0 auto;

margin: 10px auto;
1 Like
16

sorry I didnt understand your answer.
Why do i have to use width in order to auto center margin?

17

i just found in the w3schools that to center the element horizontally you don’t need to put 0 you can just write margin: auto;

Screenshot from 2020-04-15 22-43-17
Screenshot from 2020-04-15 22-43-17903×449 20.9 KB

so may someone explain are there any difference between
margin: 0 auto; and margin: auto;?

18

The first instruction of this lesson tells you to set the width of .pull-quote to 350 pixels.

When I run this code it does not accept it as correct. Am I misunderstanding the instruction?

.pull-quote {
  width: 350px;
}
4 Likes
19

Few questions: @mtf you there my friend?

  1. Why not
#main {
  margin: 0 0;
  margin: auto auto;
  margin: auto 0;
}

why is it 0 for top and bottom and auto for left and right?
Thanks in advance,

20

In any compound property, there is a set order.

 border-width: 1px 2px 3px 4px

The above sets all four borders with their own thickness. The order is as follows,

top left bottom right

Always. When we compress it further,

border: 1px 3px

Now the top and bottom are the same, and the right and left are the same.

top/bottom  left/right

In margin: 0 auto the top and bottom have zero margin, the right and left are balanced out to be nearly the same, assuming the width is less than the parent’s width.

.parent {
    width: 100%;
}
.child {
    width: 90%;
    margin: 10px auto;
}

We can set the margin to any size, not just 0. Zero margin top and bottom means there is no gap at top or bottom.