I am aware of the line-height property and all the fun we can have with it, but is it possible to adjust line spacing some other way?
In Adobe InDesign, for example, line height and line spacing are two separate properties that can be adjusted independently.
I'm working on a design right now using a very nice Garamond, but setting the line-height to a nice legible level also makes things like links and underlines look very ugly. Plain underlines with text-decoration look fine, but ideally I would like to be able to make the underlines more visually stunning and interactive, like on HuffPost's website. They are using a box-shadow. Box shadow, bottom border, anything like that will snap to the bottom of the line's height.
Can we have both with CSS?
EXAMPLE:
Normal underline using text-decoration: underline;
Border "underline" using border-bottom: 1px solid $special-blue;
Seems way too far below the text, in my opinion. Even with a moderately conservative line-height of 1.4rem
I found this solution, where you can set the line-height to 1 for that particular element. This resets line-height for that element, but doesn't affect anything else in that line.
by doing like this,
p.new a{
text-decoration: none;
display:inline-block;
border-bottom:1px solid green;
line-height:1;
}
JS Fiddle
I believe there are no two different properties for line height and spacing.
Related
I'm redesigning my website and wish to have certain paragraphs styled like in the below image.
I thought this would be fine but now it's suddenly just hit me... there's no way to set the thickness of an underline! Or at least I don't think there is?
Of course there is the border property, but then I would only have a border at the bottom of the whole paragraph and not under each line.
Can anyone think of a workaround for this?
You can turn your paragraph into an inline display: DEMO
This way you can even set a border-style to your underline'like:
p {
display:inline;
border-bottom:3px double;
}
Single <p>aragraphs in between title
An example of this would be:
h4 {border-bottom: 10px solid #000;}
I found this from another stack exchange question found here:
Edit line thickness of CSS 'underline' attibute
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/
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
I have a header that is underlined using text-decoration: underline; The only problem is the line is too thin. I would like to make only the underline thicker. I have considered using border-bottom to do this but the border stretches the full width of the container and the text is centered. Doesn't work.
You can wrap the text with <span> tags around, using display: inline-block;, remove text-decoration: underline; property and add border-bottom: 2px solid #000;
Demo
Note: Why use inline-block? So that you can also control the spacing
between the border and the text, using padding or margins, but if you don't require
display: inline-block; you can simply get rid of it as NullPoiиteя said. Also, be sure to use a class on the parent element to select particular span tag of a particular element.class pair.
Long ago, there was the property text-underline-width in the CSS3 Text Module CR, defined to specify the thickness. However, it was not implemented in browsers, and it was dropped in the 2005 version of the module. This indirectly shows that it is not possible to set the underline width in CSS.
As regards to using border-bottom instead of a text-decoration: underline, it’s a different property, with different effect (the border is in an essentially lower position), and there are many existing questions on how to make it just as narrow as the text, which seems to be the issue here. But the simplest way is to use some inline (text-level) markup that spans the text in your heading, e.g.
<h1><u>Your heading text</u></h1>
with e.g.
u { text-decoration: none; border-bottom: 0.2em solid }
Instead of u, you could use e.g. the span element, but u has the advantage of producing at least a simple underline even when CSS styling is disabled in the browser. Using u, you of course need to switch off its default underlining, to avoid getting both underline and bottom border.
try this style
<h1 style="border-bottom: 5px solid black">This is heading 1</h1>
DEMO
I have a question. In the following url I have a set of h1,h2 and p elements with their respective css styling. The h1 element has text-decoration underline.
http://nostalgia.mx/light2.html
Open the site with both firefox+ie and chrome and you'll notice the profound differences:
1.- firefox+ie make the underline proportional to the fontsize of the element being underlined, which is very smart. Google keeps it thin and un-proportional.
2.- firefox+ie 'fuse' or 'meld' the text itself with the underline so the silhouette is one single piece, which is very nice. Chrome on the other hand does not.
OK. So my question is:
Is it possible to make Chrome's look like FF/IE's?
Regards
Sotkra
The phenomenon can be observed in a simple setting where you just have an element with a large font size and you set text-decoration: underline on it. Browsers implement this in different ways regarding the width of the underline. There is no way to affect this in CSS. The CSS3 Text draft has nothing about this, even though it has properties for affecting other features of underlining. In discussions, a property for setting underline has been proposed.
If you wish to simulate underlining by using border-bottom, you can, with some extra complications in markup and CSS, set the width (and color and position). Example:
Heading
with style
h1 { font-size: 150px; }
h1 { border-bottom: solid 0.05em; display: inline-block; }
h1 span { position: relative; top: 0.2em; }
Demo: http://jsfiddle.net/yucca42/Qdeek/
In this approach, you would need to take care of setting the heading on one line and using suitable top and bottom margins (probably with settings on other elements, maybe wrapping the element inside a div container), since display: inline-block removes normal heading rendering style.