#Spacing after a p element how to#
#Spacing after a p element code#
#Spacing after a p element series#
#Spacing after a p element windows#

– Comments: it works well for pure HTML, any other way to generate HTML becomes hard to write/maintain – Float: prefer not to use if possible (I even try to change the CSS framework to inline-block when possible) – Negative margin (or word-spacing): works ok if you take care of your font and font-size seems to me broken HTML… I don’t even use word wrap because of that

So for me is the best solution and I really don’t care that much for browsers that doesn’t support inline-block.

#Spacing after a p element code#

And my code that output the HTML is pretty well formated. Since I usually develop in frameworks or at least not pure HTML, having my code to write the output inlined as it doesn’t output the spaces or line-breaks between tags and it also “compress” a little =DĪnd for those who says that my code becomes hard to read, I usually use any dev-tool available (usually in Chrome, but could be firebug in Firefox for example) which automagically converts and clean up the HTML.

I try to always use inline-block, as it is in a sense, more semantic than float and also it doesn’t break any flow nor I need to add clearfix and such.

#Spacing after a p element how to#

Worst case scenario, just use floats, but I’ll tell you that I use floats so infrequently, that I’ve nearly forgotten how to clear them :) If you do have a situation that requires it, just throw in the comment method or don’t place returns between elements. Just try to avoid designs that require zero spacing it’s easier than you think. The white-space issue is not as bad as one would think. My cross-browser testing is very easy, and everything is as it should be, the world is right. When I switched over to inline-block, my development time drastically decreased. To every other browser, it’s just a comment. If using zoom is your main complaint, then don’t fret! Just throw it in an official IE conditional and your done (see my Fiddle)! This very, very simple work-around gets inline-block working all the way down to IE6 and is only presented to the very browsers that need it. I even got so feed up with it, I wrote a jsFiddle trying to provide a link that I could just throw in a comment such as this: I’ve been trying to get the word out for years. I think it’s just habit, and no one has come along, kicked them in the arse and told them to break it. This has bugged me to no end for a long time. Nearly all developers use float rather than inline-block.

I can’t say that I know any good standards for removing whitespace in code, so I wouldn’t say this is right or wrong.Īs this is not a bug but the browswers rendering block elements as if they were inline they are correctly interpreting the whitespace in the code.

#Spacing after a p element windows#

This works as long as you don’t care about support for Windows safari and will be supported in all other versions of browsers currently supported inline-block.Ĭorrect methood is removal of whitespace in the html markup at whatever methood you feel looks best. Unfortunately there’s an issue with Safari for windows where font-size:0 is not respected for whitespace, rendering the otherwise easiest solution of setting font-size on the parent element Apparently this is problematic in older IE (6 & 7), but if you don’t care about those browsers at least you can keep the code formatting clean. You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). They’re all pretty funky, but it does the trick. Minimized HTML will solve this problem, or one of these tricks: The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Here’s some ways to fight the gap and get inline-block elements sitting directly next to each other. That’s not to say the spec couldn’t be updated to say that spaces between inline-block elements should be nothing, but I’m fairly certain that is a huge can of worms that is unlikely to ever happen. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. It’s just the way setting elements on a line works. In the case of navigation, that means it avoids the awkward little unclickable gaps.

We often want the elements to butt up against each other.

#Spacing after a p element series#

Here’s the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. I’ve seen this come up a couple of times lately on Twitter and then an interesting Dabblet so I figured it would be an important thing to document.