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;
}
Related
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
see:
http://shfa.designbytricia.com/
I have gotten the nav to be justified, but it leaves a space above it (for the mobile nav container). How can I have be both justified and not leave that space above it?
I've tried everything I can think of, but the only thing that fixes it, is to remove the:
.navbar .nav li {
width: 1%
}
which also removes the justification.
So again how can I have the justification, but get rid of that extra space up top. There should be NO space. Just the nav.
You've got an extra margin on your nav_main_row class, just change your CSS to this:
.nav_main_row {
margin-top: -30px;
}
The code sample below works almost the same, if I include or remove the 'float: left' line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don't understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn't that the purpose of floating?
ul
{
list-style-type: none;
float: left;
width:100%;
padding:0;
margin:0;
}
li
{
display: inline;
}
The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:
ul {
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}
li {
float: left;
}
This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.
The float property is meant to allow an object to be displayed inline with the text directing it to one side. Float left is thus a lot like inline but with the exception that the element being floated is aligned towards the left or the right. It is not necessary to use the float:left; flag for what you are trying to do, It can often be better to place the ul where you want it using position, margin, padding, left , top , right , bottom instead. This usualy gives a more controllable result.
Here is an example fiddle of what happens when switching between no float and float left.
http://jsfiddle.net/um9LV/
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.
float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
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
How to reduce gap between two display:inline items?
gap is showing on all browser?
ul.tabs li {
display:inline;
margin:0 padding:0;}
alt text http://img167.imageshack.us/img167/7283/pruebank5.gif
I can fix the problem using float:left in the LI elements but I need
to understand why it's happening.
You have whitespace between your inline elements. float: left fixes the problem, because floating implicitely converts the element to a block element, regardless of display: inline.
And you need a ; between margin:0 and padding: 0.
... but I need to understand why it's happening.
You may have whitespace or new lines between your inline elements.
For further reading, you may want to check out the following Stack Overflow post:
Best way to manage whitespace between inline list items
Reduce the word-spacing CSS property to less than 1em.