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
orange sky
Front End Web Development Techdegree Student 4,945 Pointswhitespace issues
Hello!
Can you please explain to me step by step the code responsible for removing white spaces. Randy explained it but it was too fast, so I didn't get any of the explanation:
<?php
foreach($products as $product) {
echo "<li>";
echo '<a href="#">';
echo '<img src="' . $product["img"] . '" alt="' . $product["name"] . '">';
echo "<p>View Details</p>";
echo "</a>";
echo "</li>";
}
?>
Thanks!
3 Answers
Marcus Parsons
15,719 PointsHiya orange sky,
Before Randy edited the code to what you have up there, there was a lot of whitespace in between each <li> tag because every line was being indented by the editor (to show the hierarchy). Since each line is indented but not wrapped within the php tags, all of that whitespace is sent to the browser as HTML.
But, with the addition of the echo statements, only what is contained within those echo statements is sent out the page. So, for example, instead of sending this to the webpage with tons of whitespace:
<li>
It is only sending this:
<li>
And so on for each echo statement. None of the whitespace from the indentation of the PHP code gets sent to the HTML page because remember the PHP parts of code only send back the processed code. I hope that makes sense!
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Marcus,
That was totally well explained. Just a few questions:
1) In the future, before I run any code, how can I tell white spaces will be generated?
2)In fact, how did Randy instantly know the reason the fourth shirt went to the next line? I think most of us would keep removing the margin between each picture or perhaps shrink each picture, so that four pictures fit on one line. hmmm how did he come to that conclusion? And which is better for this problem using php like he did (so that the extra space is not processed) , or reduce the margin between pictures or shrink the picture width?
2) This not indirectly related, but I remember Guilherme mentioned that when you turn inline elements into block elements by using either display: block or display: inline-block the white spaces get removed, so to add the space back, we should give the element a margin-right with a positive value. Would this be another reason white spaces would occur or not occur?
Sorry for throwing #2 into this post, but its been a burning question, that I have been meaning to inquire about.
Thanks!!
Marcus Parsons
15,719 PointsI'm going to attempt to answer both as succinctly as possible:
You're naturally going to have whitespace in your document. When you indent the code in your code editor, that whitespace is hardwired into your document and takes up physical memory on your server regardless of what language is being used. But the keyword there is your document. In regards to PHP, this is the script that is run on the server before it is sent to the user because the script/page you have on the server is different than the one the user receives:
On your end, you have: PHP + (HTML + CSS + JS) already in document
On their end, they will receive: Processed HTML/CSS/JS + (HTML+ CSS + JS) already in document.
In essence, you really have two different files between what is on your server versus what the end user receives, because they only receive what your script sends them plus anything that was already on the page.
The rest of what Randy says about whitespace and inline-block is best explained by him on this blog post.
orange sky
Front End Web Development Techdegree Student 4,945 PointsThank you so much Marcus!!!
Marcus Parsons
15,719 PointsAnytime, Orange! I wish my name was Orange! haha Happy Coding! :)