Great tip. I always fiddle with the margin values, which to your point, isn't future proof.

this is awesome... thanks a ton... I've been wondering about this for ages.

Thanks guill, great tip, I have a suggestion for a future forum tip, I'd like to know how can i center an element not only horizontally but vertically, with percentanges for a fluid responsive page, for example if i want an image always in the center of the screen not only horizontally but vertically, this for a "welcome" web page were the user always see the image centered in the middle despite the device used

Would be nice to make a Note and Pin the Video to my Profile to find it again when needed later. Or Click a heart or Favorites-Icon. To collect vids with personal notes and make your own Collection.

Thank you Guil for sharing your Great knowledge

Very well presented. Great work. Although I already practice this technique, it was definitely a video worth watching!

Wonderful explanation, thank you Guil!

Thanks for this great tip ...

Thank you!

thank you!

Hi, Guil!

Thanks for the great tip. I'm battling this one myself on a small, personal project. Unfortunately, this didn't work for me, and I'm wondering why. Unlike your example, I have a .wrapper div that contains several other smaller divs which mimic Post-it® notes. The .wrapper div sits inside another div identified as #bulletin-board. I defined the property display: inline-block; in my .wrapper selector, but it's still expanding to fill the full width of the #bulletin-board, and none of my .post-its are centered. Is this because each of the .post-its (i.e., the elements contained within .wrapper) are also divs, rather than inline elements?

For your reference, I'm including a few code snippets below:

#bulletin-board {
    background: #eee url('../img/cork.png') repeat;
    border: 15px ridge dimgray;
    border-radius: 10px;
    margin: 20px auto;
    overflow: auto;
    width: 90%;
}

.wrapper {
    display: inline-block;
    overflow: hidden;
    text-align: center;
}

.post-it {
    float: left;
    font: normal 1.25em 'Covered By Your Grace', cursive;
    line-height: 1.15em;
    text-align: left;
    margin: 1em;
    width: 16.5em;
    height: 16.5em;
}

Thank you! This helped tremendously! :)

Thanks Guil!!

Guil Hernandez , Great tip, a question ... how to create and use with nesting navigation?

Absolutely loving the tips keep em coming! The playlist was great too, a great place to refer back to as well once I start building websites of my own from scratch (very soon yay!).

Yup! Nice one.

thanks guil, nice tip

Thank you! :)

Thank you!! Awesome tip!! ;)

With the "display inline-block, if you remove the whitespace between the elements in the code. In this case the <li> tags. The space between them will dissapear, no need to use a negative margin.

THANK YOU!! Couldn't figure this out for age!

That was a great video and had a lot of useful tips for people needing to format their pages, but I don't really like the negative margin solution you gave us for the problem of gaps between elements. I understand wanting to keep presentation and content confined to CSS and HTML respectively, but the problem with the gaps between inline elements isn't with the presentation. The problem is with the content.

What happens if in the future, the rules change so tabs and new lines don't cause extra 'Space' characters to be added between elements? Every page with a negative pixel margin to account for extra 'Space' characters will need to be changed.

Even without taking into account future changes to the internet, adding negative pixels margins can cause problems for users right now. The first choice of font doesn't always get loaded; if the fallback font options require a different negative margin, the page might not render properly. Also, if users have personal styles set up to make fonts larger or smaller, the negative margin probably won't have the right value.

I dislike the solution of not having white space between the elements in the code because it makes the code hard to maintain. Instead, I think the best way to handle the problem with the unwanted content is to use HTML comments to remove it.

  <ul><!--
    --><li><a href="#">Home</a></li><!--
    --><li><a href="#">About</a></li><!--
    --><li><a href="#">Work</a></li><!--
    --><li><a href="#">Contact</a></li> 
  </ul>

This way of solving the problem has several benefits over both the negative margin and the white space removal solutions:

1. The page will render correctly regardless of font sizes or user style sheets.
2. The page will render correctly regardless of changes in the way HTML is handled by browsers in the future.
3. Organization of the code is kept intact for ease of maintenance.

Code Pen Demo of Comment Solution

I've just been through both CSS deep dives and am putting everything into practice now. This is something I've been struggling with, so awesome tip (and great timing for me, too).

awesome tip! thanks Guil! :D

How to set up the following code from codepen, to actually make it work with coda. So far Im getting just a red page with white text on, when I copy and paste this two code forms. Any help would be appreciated.

This one goes to html: '''<header> <h1>My Site!</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </header> <div> <p>Tattooed viral put a bird on it skateboard. Drinking vinegar locavore squid farm-to-table, dreamcatcher tattooed kitsch scenester. Tousled wolf squid Wes Anderson PBR, Williamsburg banh mi dreamcatcher stumptown ethnic sartorial mlkshk. Hella mixtape bespoke mustache Bushwick. Post-ironic hashtag jean shorts, Truffaut organic roof party pop-up wayfarers selvage narwhal. Williamsburg kale chips beard, artisan XOXO occupy pickled. Mixtape roof party twee, post-ironic bespoke hella artisan meggings Carles brunch pop-up Tonx street art normcore. DIY paleo slow-carb occupy tofu fingerstache. Wayfarers butcher trust fund wolf, fap messenger bag quinoa flannel sartorial organic.</p> </div> '''

And this one to CSS:

'''body { padding: .5% 14%; } header { margin-bottom: 44px; text-align: center; } ul { padding: 0; margin: 0; list-style-type: none; overflow: hidden; display: inline-block; background: tomato; } li { float: left; padding: 10px 22px; background: steelblue; border-left: 1px solid #3b6c94; } '''

Nice pattern Guil. But one thing i don't get, why the p tag is displayed in a 2 column layout. There is no property targeting neither the div nor the p tag. how could that actually be displayed that way at all?!? Ok if i go to the dev tool s i see what is leading to that column layout ( webkit-column-count and webkit-column-gap). but they aren't defined anywhere inside your pen. That's odd. Best regards Ralf

Awesome tip. Thanks a lot Guil!

Thank you, I had resorted to messing with the width values this saved me.

Can you do the same with Flexbox?

Thanks for this. It really helped me not only with text navigation but also with images. I had an image gallery and I put them in an ul and then put the display: inline-block: in the ul and it centered it like a charm and it stayed centered throughout all of my responsive layout without having to write any additional styles for it in my media queries. So even when they collapsed in the tablet and phone views they stayed centered so it all worked out.

Thanks a lot for this tip, very helpful. This has bugged me for many times. Now I must remember to set inline-block for the parent element.

Great :D

Please do more vids about the topic.

thanks:)