Let me explain my view of the difference between line-spacing (which I would like to emulate), and line-height, using this picture:
Here you can see text with line-height > 1 inside a container with padding. An extra visual whitespace is added to the top and bottom of the text, and I want whitespace to be added between the lines only.
Why I (and you) may need this feature, emulated line-spacing? Because if you have buttons or images inside this container alongside with text with line-height > 1, text and images will look misaligned. Text has extra whitespace added to the top and the bottom, which causes edge of the text look more far from the container border.
To avoid this, I manually add negative margins to the text:
h1 {
font-size: 30px;
line-height: 42px; /* or 1.4 */
margin: -6px 0 -6px 0;
}
So what's the problem?
I am very dependent on font-size in pixels. I need to recalculate margins after every change of font-size or line-height, and I have to calculate it for h3, p and so on.
I'm looking for some way to automate this (some magic I'm missing).
Related
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I actually wrote here a whole page of text, but it was impossible to understand and putting a jsfiddle is just easier for you guys.
here it is: http://jsfiddle.net/pMdZK/
the problem is links dont work, if they do hovers doesnt work and I have tried solutions like clearfix.
Both "container" and "default" divs are essential to me and they are actually 2 images that meant to overlap each other(one is half-transparent, gif image with some parts missing. that is to change that image later for other stuff, while user is in page.)
also changing
position:absolute
doesnt seem to do much either.
Changing the padding-top of all items into margin solves your problem. The reason is that padding extends the entire entity while margin pushes the other entity's away.
http://jsfiddle.net/pMdZK/1/
You had:
#containerx #pl6
{
padding: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
You need:
#containerx #pl6
{
margin: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
change this for every item ofc.
The difference between margin and padding:
Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.
Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.
Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.
To further explain the difference i made a quick jsfiddle.
http://jsfiddle.net/GRLkt/
The padding box expands the entire div. (as you can see by the background image).
The margin box pushes the other content away.
I am using the following code to style blockquotes on my site:
blockquote {
border-left: 7px solid #b83131;
background: #ebebeb;
margin: 1.5em 25px;
padding: 1px 10px;
quotes:"\201C""\201D""\2018""\2019";
}
The line that begins with padding: controls the padding on the top and bottom of the block quote. For some reason, it doesn't work as it should. Instead of padding by only 1px, it is always way more than that. It's as if, no matter what I set as the padding, it is always at least a few pixels high.
For example, with the padding set as you see in the code above, this is the result:
As you can see, the padding on the top and bottom is way more than 1px. Why is that? I want the padding to be a true 1px, but it seems that no matter how I alter the code, it's either no padding at all, or way more than 1px.
Any help here?
If you take a look at the following jsfiddle, you will see that with only the code you posted, one cannot reproduce the problem.
I for myself believe that there is a <p> tag inside your blockquote.
Just remove it by setting its margin to 0.
p {
margin: 0;
}
Try adjusting the line height of the text within the blockquote. It might be that the 1px top and bottom padding is enough to for the text to kick down to the next full line making it looks like it's over padded.
I had the a similar problem: I was trying to minimize the space above the block quotation, so I set
BLOCKQUOTE {margin-top: 0}
This seemed to work sometimes, but not always.
Here's what I discovered: When it didn't work, there was an unclosed paragraph <P> tag somewhere above the quotation. The opening <BLOCKQUOTE> tag effectively closes that paragraph, so the unwanted whitespace was coming, not from the top margin of the quotation, but from the bottom margin of the paragraph above it. This fixed it:
BLOCKQUOTE {margin-top: 0}
P {margin-bottom: 0}
Of course, if you don't want every paragraph to have zero bottom margin, you can define a special class.
I'm having a strange issue with some #font-face text where there is some strange padding (or at least vertical space) included with the text. It is causing problems because I want to text to be positioned a certain way but can't have it overlapping other things. Here is a picture of what is occurring:
As you can see when the text is selected, the text overlaps some of the navigation bar above it. I have tried adjusting the line height and padding, margins, anything I can think of. Here is the relevant CSS, does anybody have a suggestion as to how I can get the height of the line to be around the height of the actual text.
*{ margin: 0; padding: 0; }
h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }
EDIT: Here is a live example of the problem: http://codezroz.com/stuff/hello.html
never seen the /.95 syntax before, but after a few tests now i belive it works like:
line-height = 0.95 * font-size = 332.5
so i think that's your problem, the font is taller than the line
adding overflow: hidden; on the H1 should be enough
Well, applying overflow: hidden to h1#logo stopped the selection highlight from bleeding into areas that were outside the element.
Also remember that you can use the :selection pseudo-element to change the color of the selected text.
The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like (but it hasn't) it has been placed in a smaller element with overflow: hidden;.
Anyone know how to remedy this?
You need to specify the line height to match the font size...
CSS
h1 {
font-size: 2em;
line-height: 2em; /* or 100% */
}
See also IE7 is clipping my text. How do I adjust its attitude?
I had the same problem for IE9 and spent a lot of time fiddling around with the attributes for "height", "line-height" and "padding". Here's what I came up with:
(a) "height" does not affect what's happening inside the textbox;
(b) "line-height" does affect the display of the text and will cause it to be higher or lower in the text box, but the number is important. In the end the first answer seems to be correct i.e. set "line-height" to the same number as your font size;
(c) "padding" also affects the display of text because it creates the space between the borders of the textbox and the text itself;
(d) "vertical-align" provides a reference point for the text inside the textbox.
So, as an example, I got the text to display in the mid-line of the textbox on my site (with no cut off) and a nice distance from the textbox borders by using the following CSS in relation to the "input=text" area of my CSS style sheet:
line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;
The 14px was the size of the font used in my template (stated elsewhere in the CSS style sheet), the 6px is top and bottom padding respectively and the 2px is the left and right padding respectively. The vertical align attribute places a notional middle line through the text. Obviously you can change any of those numbers to suit your requirements.
BTW, for newbies, use the firefox "firebug" plugin to find the code in your CSS syle sheet that needs changing. Just highlight the text box in question and on the right it will give the name of the CSS style sheet its location and line number where the code appears. You can even use "firebug" to do a live test run which will show you the effect of the changes, but which will not be saved when you close your browser : )
Hope this helps.
Try changing the overflow attribute for the element the text is in.
Overflow: auto;
Or
Overflow: Visible;