12/17/2023 0 Comments Spacing after a p elementIf 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. 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. Here’s the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. It even lets you place tags in the middle of words.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. The value here is that it gives you full control over whether tags and/or plain text should touch. So…Pug drops the whitespace between tags, but keeps the whitespace inside them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |