I have a table with 2 cells and <img> inside both.
I tried to use cellspacing:0 and cellpadding:0, valign="top", but none of them seem to solve my problem, I still have this annoying space between my cells. how can I solve this problem
Here's my jsfiddle http://jsfiddle.net/gbumubn3/
The white space is because of the <img> not the <table> element. Because of it's display mode it's behaving like text and reserving some space for 'Descenders' which are the low-hanging parts of text for example the bottom part of a lower case 'y'.
For more on a 'descender': Typography Descenders, on Wikipedia
The basic solution:
The solution is to set the CSS style display:block on your <img> elements.
The 'elegant' solution:
You can implement a CSS rule to automatically set display:block on all images who are the only child of a table's <td> element:
td img:only-child {display:block}
Edit: You can also use the CSS attribute vertical-align to solve this issue whilst preserving display:inline-block.
Forked example:
Click here for JSFiddle example
The space is actually caused by the <img> tag. Take a look at this jsfiddle (I've added a red border to the table cells): http://jsfiddle.net/gbumubn3/13/
See this answer for more details.
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed.
Related
I've a problem with a customized font used in an input field.
As you can see is cutted on top and on bottom.
There is no padding or margin. What could be the error?
I think is related to this div that doesn't appear in entire code.
It seems like the height is too small, but I could be wrong. Try setting the 'height' parameter to 50px and let me know if that fixes it.
The span surrounding the <input> is an inline element. I suspect this is what is causing the issue. Try to change the <span> to display: block
I have HTML page that contain multiple div element each div is card that display as inline-block the number of generated div depends on row data comes from server, until here every things going as i need but theres whitespace between each card div that make an inappropriate display on phone and i think the problem from whitespace i'll attach screenshot for inspector?enter image description here
display:inline-block seems to leave very small spaces between elements.
Either use flexbox (display:flex on parent element) or a little trick of adding margin-left:-1px to each element (or however much space is being created between each element).
Inline elements are treated as text. (I'm making this overly simplified.) Notice that text has spaces between words. Images have spacing between them for the same reason. Therefore, inline elements will have spaces between elements.
The way around this is to trick the browser into thinking elements are letters
<div>content</div><div>content</div>
Now there is no spacing or elements between content.
There are other ways to do the same thing, such as:
<div>content</div
><div>content</div>
I got a CSS question related to this fiddle: http://jsfiddle.net/r584e/
Here the relevant screenshot
Sometimes I've got to style an inline element in a such way, trying to almost avoid space between rows and applying a background only under the text. As you can see, the first paragraph has a link inside, in which I set line-height: 1em . The paragraph on the right has instead a line-height: 0.8em;. (Note: I know in this way I could roughly cut some letters - like q,g,p,... but the text is uppercase so it's not really a problem)
In the second paragraph rows are actually closer (as I want) but unfortunately each row is also partially overlapping the previous one (unless you remove the background color applied) and this is not good (e.g. see the word «uppercase» on the bottom), so here my questions:
how can I get the rows closer (like paragraph on the right) without them overlapping each other and defining a background color (no matter the element in which it is applied but it has to stay under the text, not fill a whole block)
Optionally there is a way to add an horizontal padding to each line of text?
Feel free to change the CSS and/or markup. I'm looking for a pure CSS workaround.
An optimal solution should work on modern browser and, if possible, at least from IE8+
Thank you in advance. =)
Edit:
About 2nd question, using #thirtydot solution I can add space (to the right) using white-space: pre-wrap applied on the span element
Simply add a wrapper element inside the em, such as a span, and apply position: relative.
See: http://jsbin.com/axefaf
<a href="#"><em style="line-height: 0.8em">
<span>This is an uppercase multirow text inside a link element</span>
</em></a>
span {
position: relative;
}
This works in all modern browsers and IE8, but does not work in IE7.
I have a <a> element as inline block with a fixed width. I would like to show the <a> boxes next to each other, two boxes per row (exactly like in the first example). BUT if each box element is in a new line in the source code (second example), the boxes gain an invisible margin, which you can see if you have a look at the example with e.g. the Chrome dev tools. The width and padding of the parent wrapper, and the margin of each box is exactly calculated, so that the added invisible margin pushes the second box down into the next row.
I could just use the code of the first example (all the elements without line breaks directly behind each other), but I would like to know how can I remove this invisible margin so that the two boxes again fit next to each other in the wrapper div (like in the first example), even if each <a> element is in a new line in the source code.
Examples:
1.) Without line break in code (the layout I want to have): http://jsfiddle.net/mLa93/2/
2.) With line break in code (added line breaks after <a> element changes layout): http://jsfiddle.net/mLa93/3/
As fcalderan suggested white-space:nowrap on the parent should work. See http://jsfiddle.net/kkpKg/ for an example. If it doesn't, then you must be doing something different or wrong.
Ok, now I get it :-)
The best solution is to leave out the line breaks, however if you don't want that, the next best would be to comment them out:
<div id="wrap">
box 1<!--
-->box 2<!--
-->box 3
</div>
If that isn't a possibility the only thing that I can think of (and is supported by current browsers) is to set the line-height font-size in #wrap to zero and back to original size in the links:
#wrap {
font-size: 0;
}
#wrap a {
font-size: 14px;
}
Chris Coyier posted a good article about this problem:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I didn't realize this question was from a year ago!
Since you've spent so long trying to figure this out, I did some researching and found a similar question. I've adjusted your code here
solution
and it should work now.I placed 5 blocks because of the float case you mentioned before
EDIT: the problem was your margins. You have a 10px padding and 10px margins. If you had made your div 230px (3x10px + 2x100px) you would have gotten the same effect as the first fiddle.
try to use white-space:nowrap on parent element (the container of your links) and probably white-space: normal on links
Please have a look at this page www.pixeli.ca/issue.
I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens.
Thanks.
Simply adding float:left to the image fixes it.
<img src="imagetop.png" style="float: left;"/>
Not quite sure why or if there's a slightly more accurate method but hey, there you are.
Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.
set image to display:block and it should work.