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 trialmaya sophie
5,754 PointsUsing float over inline-block
In the video around the third minute, Guil is using:
.main-nav li { float: left; } I did it using:
.main-nav li { display: inline-block; }
The only difference noticed was more space between blocks when using inline-block. Is Guil's method better ?
2 Answers
Dehn Hunsworth
7,189 PointsNot knowing what other css was there...those two lines might have had a similar result but are very different properties. When you set an item to "display: inline-block" it will allow other css properties to apply where "display: inline" blocks many of them. probably why you saw the extra padding between them.
Michael Shields
12,650 PointsHi Maya,
That is a main difference when using floats - you won't have to worry about the html whitespace that can appear if you were using the alternative and changing the display value to something like inline-block. Eliminating that whitespace will require additional styling declarations in your css which might seem unnecessary when compared to using float values to build the layout.