Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
evans tsai
3,735 PointsDoes the space affect the result in CSS??
/* =================================
Base Element Styles
==================================== */
* {
box-sizing: border-box;
}
body {
line-height: 1.6;
color: #3a3a3a;
}
a {
color: #fff;
text-decoration: none;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
margin: 0;
}
/* ---- Layout Containers ---- */
.container {
padding-left: 1em;
padding-right: 1em;
}
/*
width:70%;
margin: 0 auto ; 可以把文字置中*/
*/
/* 多加一個container ,這樣圖可以100% 但字保留70% */
.main-header {
background: #3acec2;
padding:1em 0;
}
.main-footer {
padding: 2em 0;
background: #d9e4ea;
text-align: center;
}
/* ---- Page Elements ----
/* =================================
Media query
==================================== */
@media (min-width: 769px) {
.wrap{
min-height: calc(100vh-89px);
}
.container {
width: 70%;
max-width: 1000px;
margin: 0 auto;
}
}
I wanna make a sticky footer by using :min-height: calc(100vh-89px), and it can't work .
however if I revise it with min-height: calc(100vh - 89px); and it show the correct sticky footer.
So I am wondering that does the space really affect the result in CSS???
3 Answers
Christian Andersson
8,712 PointsYes, the whitespace here does matter. Typically spaces don't matter, but CSS functions are sensitive like that.
Here's what the MDN says:
Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
Guil Hernandez
Treehouse TeacherYep, you need whitespace around the operator in calc(). Check out this video(at 5:00), where I explain why you need the whitespace. :)
Christopher Bolivar
10,879 PointsTrust me the spacing had no affect on your code, you must have forgotten to refresh your page!
Christian Andersson
8,712 PointsTrust me, you're wrong ;)
Jason Anders
Treehouse Moderator 145,863 PointsSorry Christopher, but you are incorrect.
Christian Andersson is correct in that the Whitespace is essential around calculations. Have a look at the documentation he's provided. :dizzy
evans tsai
3,735 Pointsevans tsai
3,735 Pointsthank u so so much!
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsNo problem. Just remember that
calc()works poorly in the Android browser as well as IE8 and earlier.evans tsai
3,735 Pointsevans tsai
3,735 Points:)