Below is a jfiddle containing the following html.
<span class="label label-warning">helloworld</span>
<i class="icon-copy"></i>
I run into this issue a lot, where two inline-block / inline elements are side-by-side and don't match up at the same top. I believe this has something to do with the line-height of both elements not being the same. Is there any hack to combat this effect?
http://jsfiddle.net/YfZVS/
Current Configuration:
Desired Effect:
.btn { vertical-align: top; }
Works on this browser... I can't check any others atm. here's the fiddle
if you float both of your elements left they will line-up, you can then add a margin to space them out check it out in the fiddle that is in the comment, Stackoverflow is preventing me from adding the link in the body!
Related
Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery
I have an input field an width of 20% like you can see here:
<input id="saveServer" width="20%" class="depth"></input>
So to center it i add two span elements,with an width:40%, before and after the input field, to center the input field. Like you can see here:
<span style="width:40%"></span>
<input id="saveServer" width="20%" class="depth"></input>
<span style="width:40%"></span>
But somehow the the inut field does not center himself. I have no idea how to center it! Greetings from Germany! Thanks!
Heres the same example on fiddle:http://jsfiddle.net/bmkc2/
I think more context would help to clarify the problem,
but is this what you are after? One way to
center the input itself is by adding the rule:
margin: 0 auto;
http://jsfiddle.net/QqRCm/
Sticking to your method, here's a working fiddle: http://jsfiddle.net/bmkc2/1/
to be taken into consideration, a width can't be applied on an inline element like a span. You first have to display it as inline-block for example.
display: block on input will display it alone on its own line. Again, inline-block or floating.
inline-block has one annoyance (it's normal but still annoying here), it'll display whitespace between elements displayed as inline-block, that is a 4px space between each span and input. The HTML comments are there to avoid these spaces (it's normal because imagine two words each in a span and separated by a space. You need and expect this space between words or it'd be unreadable!)
width: 20% and border-width: 1px and padding 5px will add up and with 2x40% it'll be greater than 100%. box-sizing: border-box will avoid that border and padding are taken from the 20% width (check caniuse.com for the complete list of prefix to add -moz-, etc).
edit:
your input has neither a label (associated with its for attribute) nor a title attribute, is it just because it's a demo ?
margin: 0 auto as stated in another answer and text-align: center are preferable to adding 2 empty elements just for centering. I just wanted to make your first try work.
The reason your code does not work as you think it should is because both the input element and the span element are floated elements. To get them to work they way you are thinking, you need to have them displayed as inline-block elements.
Add the following code and it will work the way you expect it should.
span, #saveServer {
display:inline-block;
}
jsFiddle: http://jsfiddle.net/bmkc2/2/
---------------------------`
.x
{
margin: 0 auto;
display: block;
}
`-----------
to enter the image copy the link then paste in browser
https://i.stack.imgur.com/XJsoq.png
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
I've got a dropdown I've made: http://jsfiddle.net/QPxVe/
For some reason, jsFiddle is altering the alignment which is not present outside of jsFiddle - this is not the issue.
I seem to have a gap between items and I cannot see why it is being added.
The Fiddle has different colours and fonts, but other than that, everyting is identical. The arrow in the image below points to the problem - it is like that for all the divs. If I set the margin to
-4px for the main .dropdown class, it is fixed but I'm not sure why the space is appearing in the first place...
It's because whitespace (e.g. new-line characters) around display:inline-block element is rendered as space. One of solutions is to set font-size for parent element to zero.
See http://jsfiddle.net/Kb7Fp/ where following rule is added:
BODY > DIV {font-size: 0; }
It is because of the whitespace (as Marat said).
Another solution (that I found more convenient) is to comment the line break like that:
<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>
You can see the result here: http://jsfiddle.net/EfQdX/
Marat has the answer as to why the whitespace is there.
Depending on your reasons/needs for display: inline-block, another solution could be to add float: left; to the .dropdown rule.
Like on this fiddle: http://jsfiddle.net/QPxVe/2/
http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)