I am currently on the box model lesson and I am stuck on the Davie’s Burgers Exercise and it says, " Set .body elements inside .content to have no vertical margin and automatic horizontal margins so that it is centered. Was this taught in the lesson or am I missing something? SOmetimes I feel it is not taught or maybe I am not retaining the information very well. Any ideas?
The Box Model: https://www.codecademy.com/courses/learn-css/projects/box-model-on
It must have come up when discussing shorthand syntax for margins, padding, border, and a number of other properties that have top, right, bottom, and left selectors.
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
This can be reduced using shorthand, to this,
margin: 0 auto 0 auto;
or more simply,
margin: 0 auto;
since the values for top/bottom are the same, and the values for right/left are the same.
It can’t hurt to look up property shorthand since it can save us a lot of typing. The order in both examples above is set by the definitions.
top right bottom left
which reduces to,
top/bottom right/left
as shown. This order never changes.
Hi, I’m currently stuck at this point as well. I’m aware of the margin rules but it’s “Set .body elements inside .content”
The code as it shows originally is
.content {
width: 100%;
height: 500px;
margin: 10px auto;
overflow: scrollbar;
}
are they meaning we should do this
.content,
.body {
width: 100%;
height: 500px;
margin: 10px auto;
overflow: scrollbar;
margin: 0 auto;
}
because otherwise, I’m very confused by the wording of the request.
.body elements inside .content would be children, so the selector should be a combinator:
.content .body {
}
Note the whitespace between the two class selectors.
Oh! Thank you! That makes more sense than how it was worded. Appreciate your help!