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.
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
I'm trying to learn the basics in CSS but I still have some problems.
How can I hide this "a" space under the img?
I gave it a red background to make it easier to explain which part I'm talking about.
here is the problem:
http://jsfiddle.net/3c48P/7/
.feedEkList li a {
background: red;
}
This is the CSS but I cannot hide it (I want to keep the img of course)
Try display:block on image:
http://jsfiddle.net/3c48P/9/
.feedEkList li a img
{
display:block;
}
The issue is that your <a> and <img> are both inline elements so spaces are preserved during display.
However, you are treating them as block level elements and expect them to contain no such spaces.
The simplest (without going in-depth into other issues) is to make both the <a> tags and <img> tags display: block (although as salivan pointed out the img tag alone should be sufficient).
Just add this line display:block;. it will solve your problem because the img is shown in line by default
Add it in the css like this
img {
width:100%;
height: auto;
display: block;
}
img elements are "inline", just like text. This white space is the part of the line that holds the descending part of letters (for example j or g) and the vertical align of the image is set at the "baseline" of the line, where the bottom of most letters rest (abcd).
One option is, as pointed, display block in spite of it's default "inline" display. You can also avoid it changing the "vertical-align" to "bottom".
I need the anchor text to wrap to the second line and still maintain the layout.
I have tried everything and I am not sure what I am doing wrong here.
Above is how I want it. My demo site where u can see the live layout : http://www.iamvishal.com/residen/?q=node/54
I have tried many variations
max-width
word-wrap
but nothing seems to work.
The strange wrapping is due to the use of padding on an inline element. You should either move the padding to the li elements instead of the anchors or change the anchors to display: block or display: inline-block.
I played arnd with your CSS on your website. This seems to do the trick. Do post your css and html on jsFiddle so we can better help you.
#navigation .links, #navigation .menu {
text-align: -moz-center;
}
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>