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 CSS Layout Techniques Display Modes Inline-Block Formatting

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

spaces between links

Hello!

Would you happen to know why when we open a space between Link1 and </a> and you run this HTML page, the browser closes all the default white spaces between the links, so the links end up one after the other without any space between them. This happens before we give the class 'main-header' a margin-right: 10px;

<li> <a href="#">Link 1(space) </a></li>

However, that default white space in all links caused by display:inline shows when there isnt a space between the text 'Link1' and </a> 

<li> <a href="#">Link 1 </a></li>

This is a snippet from the main code from this class

<body>
<div class="main-wrapper">
<header class="main-header"> 
<h1 class="main-logo"><a href="#">logo</a></h1>
<ul class="main-nav">
<li> <a href="#">Link 1 </a></li>
<li> <a href="#">Link 2 </a></li>
<li> <a href="#">Link 3 </a></li>
<li> <a href="#">Link 4 </a></li>
</ul>

</header>

5 Answers

Dave Berning
Dave Berning
17,365 Points
Dave Berning
Dave Berning
17,365 Points

orange sky, I figured out the problem. You need to set ul.main-nav to "display: inline-block;" not inline. That will give you some unwanted margins that you'll want to zero out.

ul.main-nav {
       display: inline-block; /* fixes that spacing issue */
       margin: 0; /* cancels out unwanted margin */
}

Just a suggestion, since you are using the HTML5 doctype, I would go ahead and wrap your ul.main-nav in a <nav> tag. Not only is much more semantic, it will help you with any SEO efforts by clearly defining a navigation at the top of your page. You probably should add a normalizer or a reset stylesheet to get rid of all the default styles like the margin above that's zeroed out.

Suggested HTML markup
<header>
      <h1><a href="#">Logo"</a></h1>
      <nav class="main-nav">
            <ul>
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                  <li><a href="#">Link 4</a></li>
            </ul>
      </nav>
</header>
Dave Berning
Dave Berning
17,365 Points
Dave Berning
Dave Berning
17,365 Points

You're right, white space is ignored by browsers. You use white space for your benefit when writing code, and others when reading it. To add space just add a margin value to the list item.

nav li {
     margin-right: 20; /* any value */
}

nav li:last-child {
     margin-right: 0 /* zeros out margin on last li */
}

You might need to tweak this but this is the basic idea.

Dave Berning
Dave Berning
17,365 Points
Dave Berning
Dave Berning
17,365 Points

orange sky, this is still a great way to add spacing between navigation items.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Dave!

If you run this code below, you will see that if you put a space between the text and </a> and you run this code on a browser, that margin that inline or inblock creates between each link just closes up. Why does it close up? Please run the below and you with see.

** I think what is happening here is different from the browser ignoring all spaces***

<li> <a href="#">Link 1 (space right here)</a></li><!-- A space between the word Link 1 and </a>-->

<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">-->
<style>
body{
font : normal 1.1em/1.5 sans-serif;
color : #222;
background-color: #edeff0;

}

.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.main-footer { background-color: #b7c0c7;}
.main-wrapper{
     width:90%;
     margin:auto;}



.main-logo,
.main-nav,
.main-nav li{
display:inline;
padding: 10px 20px;
border-radius:5px;

}

.main-header{
padding:24px;


}

</style>

</head>

<body>
<div class="main-wrapper">
<header class="main-header"> 
<h1 class="main-logo"><a href="#">logo</a></h1>
<ul class="main-nav">
<li> <a href="#">Link 1 </a></li><!-- A  space between the word Link 1 and </a>-->
<li> <a href="#">Link 2</a></li><!--No space-->
<li> <a href="#">Link 3</a></li><!--No space-->
<li> <a href="#">Link 4</a></li><!--No space-->
</ul>

</header>
<body>

</body>
</html>
orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thanks Dave! I don't know much about SEO yet, but in the meantime, I will definetely get into the habit of putting a nav tag around my UL.

As for using a stylesheet and reset, yes I am using external sheets in my original code. I thought I should condense my code for this post.

Do you know how people keep up with all these styling quirks? Is there a site that can tell us the advantages and disadvantages to each style rule? I only on the first set of videos in CSS Layout Tecniques, and I am having trouble remembering all these inconsisitencies with inline, inline block, display:table-cell..... It is easy to remember JS, but I cant seem to commit these CSS exceptions to memory. How do you do it? :)

Dave Berning
Dave Berning
17,365 Points
Dave Berning
Dave Berning
17,365 Points

Did that work for you? It's definitely a good habit to get into, clearly defining all your content with various tags. One more tip, be sure to look into certain tags and when to use them. Search engines love clean markup, and properly used tags. Example. <article>, <section>, and <aside> tags (new in HTML5) are used to markup different types of content in the document.

As a general rule, articles are used around standalone content that can be easily understood by itself without the association of a website. For intense, a blog post about the 2000 Presidential Election can be wrapped in an <article> tag. Sections define a general section of a <div>, <article> or <aside>. Asides are used for secondary information on a webpage like a sidebar. In HTML5, you can have articles in sections, sections in articles, headers/footers in articles, asides in sections etc. HTML5 is pretty flexible when marking up your document.

As for keeping up with various CSS properties and values, I highly recommend Charles Wyke-Smith's book, Stylin' With CSS. He goes into great detail about CSS properties and what they do. I've actually been a web developer for about 2.5 years now since I started my web classes in school. I joined Treehouse to learn other languages like Objective-C, Ruby, and other things like business.

To keep up in the web field I read various blogs, code with friends, and research. More often then not, if I need to achieve a goal for a site I'm working on and don't know how to do it, I'll just research it. You'll always find an answer to your problem and once you figure it out, just remember it. A lot of the stuff I know is from problem solving and coming up with solutions for various things.

Recommended text and sites: CSS-Tricks, Don't Make Me Think, Interact With Web Standards(highly recommend, written by several web professionals, color coated.), Stack Overflow.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thank you so much Dave for the book recommendation: Charles Wyke-Smith's book, Stylin' With CSS and for the sites. I will definetely have a look at them once I hone my basics in CSS3 and HTML5. Cheers!!!