This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I have a jsfiddle here - https://jsfiddle.net/3sph9wpg/5/
Super simple I have a list with display:inline; to create a horizontal nav
I want a bar between each element which I can add with after
My problem is I seem to have a space after the bar that I cant remove
I need to add a space inside the which I don't like doing
ul{
list-style: none;
li{
display: inline-block;
&:after{
content: "|";
}
}
}
This is not related to the ::after - it's because display: inline-block causes the white space between nodes (i.e. between one closing tag and the next opening tag) to be parsed as a single space.
There's several ways round this. Since the size of the added space is dictated by the inherited font size, one approach is to set a font size of 0 on the parent ul.
CSS:
ul { font-size: 0; }
Output:
one|two|three
No whitespace will now show between the nodes. However, this can cause problems of the LIs have a relative font size set in ems. Using pixels or rem's gets round this problem.
Fiddle.
Another approach is to use floats rather than inline-block, which doesn't suffer from this problem.
li { float: left; }
Fiddle.
This is a common issue when using display: inline-block and having an extra line in your code. To fix the extra space just use font-size:0; on the parent ul element. You will then need to reset the font size to the value of your choice in this li.
https://jsfiddle.net/8vhqyxxr/
It's the actual white space (line break in this case) between the li elements. It's because they are inline block elements.
If you remove the breaks, the spaces are gone:
https://jsfiddle.net/3sph9wpg/9/
There are other possibilities, like messing around with the font-size. A font-size 0 results in zero-width spaces, so you could set font-size: 0 on the ul. But unfortunately, there is no way to properly 'restore' the font size of the li relative to the ul's parent, so you will have to give the li elements an explicit font size, which can be ugly.
Another solution, also not pretty, is putting the whitespace inside the tags, so it is ignored, like so:
https://jsfiddle.net/3sph9wpg/10/
A similar problem is often found when you want to display multiple images (also inline-block elements) on a single line, and I'm sure that you can find numerous solutions for that problem that also apply to yours, but most, if not all of them, will be hacky-ish solutions like the ones mentioned above.
You can use css attribute letter-spacing on the ::after pseudo element itself to correct it like this:
ul {
li {
display: inline-block;
&:after {
content: "|";
letter-spacing: -3px;
}
}
}
Fiddle: https://jsfiddle.net/thepio/Lz8z11yw/1/
Browser support for letter-spacing: http://caniuse.com/#search=letter-spacing
Related
On this page, when you hover over a navigation item, there is a gap to the left of it:
Can you help me to remove this gap please?
To solve your issue. Try to float all the li elements inside ul which remove the magical margin between each li. (screenshot below is the aftereffect)
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).
To Solve This Issue in General
Remove the spaces
Use negative margin
Skip closing tag (Hack)
Set font-size to 0
Use float
Use flexbox
Read more about the magical space for inline items,
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
use display:block instead of display:inline-block then add float:left for inline elements
display:inline-block add extra spaces in px when you write code in beauty
mode with spaces and line's
something like this:
.genesis-nav-menu .menu-item {
display: block;
margin-bottom: 0;
padding-bottom: 0;
text-align: left;
float: left;
}
I'm working within Wordpress and trying to adjust the line-height of the 2nd line of text in a menu button.
The website is: http://www.rochesterevents.com/
On the left menu, I would like to close the space between the menu item "Lilac Festival" and the dates below it so that they read more as one event. On hover you'll see they turn pink. I tried adding the code below to the Custom CSS in the Theme Options but did not see a change.
.menu-item-10 {
line-height: 50%;
}
Creating space between such items with line-height is a bad approach.
Instead, consider creating vertical space between the menu items with padding-top and padding-bottom on the links (<a> elements) in the menu. Or on the the list items (<li> elements), if you prefer that.
This way, you'll be able to use line-height the way it is meant to.
Suggested implementation in your case:
ul#side-nav > li > a,
ul#side-nav-toggle > li > a {
line-height: 1.2em;
padding: 1em 0;
}
You need to place the line-height rule on the a within the li as so:
.menu-item-10 a {
line-height: 50%;
}
The reason it's not working is that the <a> tag inside the .menu-item-10 one has its own line-height set (at 36px). Try this:
.menu-item-10 > a { line-height: 18px; }
I have designed a navbar for my website; you can see it at http://jsfiddle.net/ToddStyles/D2tZH/.
What CSS I would use to change the spacing between them? I used an unordered list to make it and changed the display to inline.
When you are displaying elements inline, HTML will parse any whitespace as a spacebar character. So, you can either comment out the space between list items, i.e.:
<li>...</li><!--
--><li>...</li>
Or, display them as block level elements and float them:
ul {
overflow: hidden; /* To prevent collapse */
}
ul li {
display: block;
float: left;
}
With regards to the Fiddle you have posted, you have used the <img> tag incorrectly. It is self-closing, and it should not be used to nest anything.
p/s: And please, don't use link shortener just because SO prevents you from posting a Fiddle link due to a lack of code. The rule is there for a reason — providing us code gives your question context.
If you’re looking to increase the width, you can apply a left margin to consecutive <li>s easily:
#navbar li + li {
margin-left: 0.2em;
}
Here’s your fiddle back. I fixed it to use inline-block to make the layout break less when it inevitably wraps on a smaller screen. And do take into account that we can’t see images on your computer across the internet.
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).
I've tried everything I can think of in Firebug with no luck.
How can I remove this white space?
You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
You can use code below if you don't want to modify block mode:
img{vertical-align:text-bottom}
Or you can use following as Stuart suggests:
img{vertical-align:bottom}
If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.
I've set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of
1) Maximum flexibility
2) No weird behavior
The accepted answer here of
img { display: block; }
which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.
1st, 2nd, and 3rd place are all a toss-up between these three solutions:
1) The solution given by #Dave Kok and #Hasan Gursoy:
img { vertical-align: top; } /* or bottom */
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Very efficient.
cons:
In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).
2) Setting font-size: 0; on the parent element:
.parent {
font-size: 0;
vertical-align: top;
}
.parent > * {
font-size: 16px;
vertical-align: top;
}
Since this one [kind of] requires vertical-align: top on the img, this is basically an extension of the 1st solution.
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Fixes the inline whitespace problem for any siblings of the img.
Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.
cons:
Less efficient code.
This assumes "correct" markup; if the img has text node siblings, they won't show up.
3) Setting line-height: 0 on the parent element:
.parent {
line-height: 0;
vertical-align: top;
}
.parent > * {
line-height: 1.15;
vertical-align: top;
}
Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.
pros:
Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.
cons:
Less efficient code.
In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)
So there you have it. I hope this helps some poor soul.
I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0; to the img selector in my CSS and the gaps below images went away.
Crazy that this problem persists in browsers in 2013.
Had this prob, found perfect solution elsewhere if you dont want you use block just add
img { vertical-align: top }
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
Give the height of the div .youtube-thumb the height of the image. That should set the problem in Firefox browser.
.youtube-thumb{ height: 106px }
As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.
But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.
<style>
.imageHolder
{
display: inline-block;
}
img.noSpace
{
display: block;
}
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>