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.
Related
I was trying to make an element not occupying any space but still visible. I don't want any possible layout-changing side-effects, which means the elements should look exactly the same after making it not taking up space.
Almost all methods provided by Google, or related answers in StackOverflow, use absolute positioning. The problem is setting position: absolute to an inline element actually changes its layout behavior.
Take this really simple layout for example:
A simple paragraph layout
My intention is to make the blue text <span> not occupying space. I set it to position: absolute:
After absolute positioning
We can see from the image that the second line of the <span> doesn't position from the start of the line anymore. It's lined up to the start position of the first line, which I assume, was to make sure the whole <span> remains a rectangular shape. But no matter what, the layout was modified after absolute positioning.
Some suggest wrapping a relative layout container around the <span>, but that won't work - as long as one absolute container is showing up, the layout breaks.
By the way, my intention on this was to emphasize a few words in a paragraph by inverting their color and background-color, and I had to make two perfect overlapping copies and style them separately in order to do so. I can't directly style one <span> because the background of multiple lines of text always overlap on the previous lines, cutting off the descenders of those letters when line-height is small, but that's another problem.
I am having difficulty reducing the spacing between lines of text with CSS line-height (or height - I've tried both).
I have a small bit of text and the spacing is off. I've tried modifying the styles that (appear to) apply, and also enclosing the text in a <span>...</span> and explicitly declaring the style. Nothing seems to work.
The site is a Wordpress site using the Pagelines "lite" theme. The URL is http://stage.dsthree.com and the issue is on the front page (you can see it in the fourth column of text, just below the "email subscribe" box in the small text - the line spacing for that text is off. This site will not allow me to post a screenshot, as I am new here.
I've reduced the line-height to 1% and to 1px to no effect.
Any help, directions or suggestions on how to reduce the whitespace is much appreciated!
Inline elements don't honour properties such as line-height; they take on the line height of the nearest block parent.
See Fiddle
Solution: remove the line-height from the body, or turn the span into a block (i.e. make it a div; don't give display:block to the span).
Add display:block & remove height.
<span style="font-size: 75%; line-height: 16px; display:block">blog posts & occasional updates (updates max 1 every 14 days)</span>
You learn more about display:block property here.
You have a line-height: 21px;
In the body. Remove this, and it should work.
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
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
I can't seem to wrap my head around how img tags behave alongside text in an html page.
I've removed margins and padding, but there always seems to be some extra space under the img or some other unexpected behavior. I'm sure theres quick CSS workaround using absolute positioning or negative margins but I'm looking for a more general solution.
Question: Can someone explain how img tags are positioned, specifically why do they get offset vertically when alongside text?
If you want the <img> to be an inline element, you can use the vertical-align CSS attribute to specify how the image will be aligned relative to the line of text it appears in. This page has examples under the "vertical-align on inline elements" heading.
The key to getting your text to wrap around your image is setting the float attribute like so:
img {
float:left;
display:block;
}
CSS has two types of display: attributes: block and inline.
Inline is like text. It streams along, wraps at the end of a box, stuff like that.
Block is chunky and has margins and padding and width (either calculated or derived).
It doesn't make a whole lot of sense, but <img> is actually an inline element, along with <a>, <abbr> and many others. What's happening is that the image is actually being rendered roughly equivalent to letters, and it just happens to not be 12pt tall, but maybe 130px or whatever your image is. That's why it sticks up.
Declare <img style="display:block;" src="image.png" /> to get it to behave like the box most people think it is.
IMG elements get positioned just like any other inline element.
What you see under the img is the space needed for the descendant part of a glyph like g or j. An image behaves just like a letter and sits on the baseline.
img
{
display: block;
}
Will fix it for you.
An experiement that might shed some light:
<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p>
Think of the <em> as a ~128px high image (if 1em is 16px that is).
If you want more control over your image positioning, wrap your image in a DIV and control the positioning of the DIV. You can float the div if you want to intermingle it with your text.
This might not be relevant in this particular case (hopefully the advice from previous answers should solve your problem), but if you're finding you're getting unexpected extra space around elements, make sure that you've removed the default padding, margins etc. that browsers often add to elements (and of course different browsers often add different amounts of padding, margins etc.
If you make sure you've zeroed margins and padding etc. by using
body { margin: 0; padding: 0; border: 0; }
at the start of your CSS, you can then add any padding and margins etc. without having to worry that the browser's defaults are going to cause any unexpected spaces, and hopefully fewer inconsistencies between browsers.