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

CSS

Does 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

Yes, 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.

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

thank u so so much!

No problem. Just remember that calc() works poorly in the Android browser as well as IE8 and earlier.

:)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Yep, you need whitespace around the operator in calc(). Check out this video(at 5:00), where I explain why you need the whitespace. :)

Trust me the spacing had no affect on your code, you must have forgotten to refresh your page!

Trust me, you're wrong ;)

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Sorry 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