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.
Related
I am new(ish) to HTML and CSS. I am building a site but it feels I am not getting as much control over it as is possible. Control over positioning and placement of items/elements/objects that is.
Example Image
Question: How can I adjust the position of specific elements/items/content on a page with CSS. In this case the 'Horizontal Rule'. How can I move/push the 'Horizontal Rule' up closer to the text above it. The 5 stars and text. And if I wanted to how can I put more space between the title and the image?
For example. In HTML I have a 'Horizontal Rule' separating an image and text above from text below. See this image here.
The 'Horizontal Rule' in this picture is in a div. The 5 star rating system and it's text is in a div. The picture is in a div and the title (everything above the image) is in a div. Lastly, those 4 divs are in a container div. How can I push the 'Horizontal Rule' up closer to the 5 stars and text with out effecting anything else on the page?
For my code please see my link in the comment below. I am unable to post more than 2 links due to reputation. Thanks.
Your answer will be appreciated. Thanks in advance!
You could try something such as:
hr { width: 100%; height: 1px; color: #CCC; margin-top: -2px; }
Not sure if there is any risk is using negative margins... I'm certainly not a CSS expert.
An easy way to figure out what you need to change in your CSS to get things closer together or further apart, is to use a developer tool such as FireBug. It allows you to inspect your page elements and not only see what their layout values are, but to edit them as well.
To ensure your <hr> tags take up the minimum space, so they are as close to other elements as possible, you can set their margin and padding to 0.
hr{padding:0;margin:0;}
The next step would be to set the margin and padding of elements above and below your <hr> tags.
Here is an example that shows the difference by changing the padding/margin of the <hr> tags.
It is only the margin that needs to be set, as the padding by default, is already set to zero. Check here to see the default values for the <hr> tag.
Hope this helps
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.
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.