For some reason, I've got an annoying padding/margin below my "large" font:
http://jsfiddle.net/o9gvgz8c/1/
I've enlarged the font more than I need, just to exaggerate the problem . The CSS in question is:
p::first-letter {
font-size: 40px;font-family: 'Special Elite',cursive;padding-right: 2px
}
If I don't use a larger font as the start character, then its fine... but as soon as I make the first letter larger, it adds this margin in.
How can I get around this?
JS Fiddle
adding line-height will fix it
p::first-letter {
font-size: 50px;
font-family:'Special Elite', cursive;
padding-right: 2px;
line-height:10px;
}
Make sure to define your ::first-letter line-height property as either:
p::first-letter {
font-size: 50px;font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 16px;
}
or
p::first-letter {
font-size: 50px;font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 100%;
}
http://jsfiddle.net/o9gvgz8c/3/
You can use relative sizing on the first letter and set the line-height property to the relative height 100%, like this:
p::first-letter {
font-size: 200%;
font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 100%;
}
You can remove that gap by specifying a line-height on the p element :
p{line-height:18px;}
DEMO
Related
I have paragraphs with inline header spans that I'm trying to set to a grid. To make sure that multi-line headers are properly spaced, I'm using line-height; however, this results in too much space between the first and second lines of the paragraph. Also, multi-line headers seem not to be inlined. (Actual desired line-height of headers is 33px, but I made it 44px to accentuate the space between the first and second paragraph lines).
Please see http://jsfiddle.net/NbTvu/4/ and http://i.imgur.com/qkffaWl.png
CSS:
p {
font-size: 14px;
line-height: 22px;
margin-top: 22px;
}
span.h1 {
font-size: 24px;
line-height: 44px;
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
HTML:
<p>
<span class=h1>DISCONTINUING PPIs</span>
— Rebound acid-hypersecretion is an important consideration following abrupt cessation of prolonged treatment with PPIs. As a result, treatment should be tapered following prolonged or higher dose treatment with a PPI.
</p>
Thanks in advance!
Your font-size is too big for the thing you want to achieve.
Look at this: if I remove the font-size and line-height, it works perfectly:
http://jsfiddle.net/NbTvu/1/
span.h1 {
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
Try to style from here.
And using span class="h1" is very very bad. Use a regular h1 or give your span a better classname.
Or you can play a little with margins:
p {
font-size: 14px;
line-height: 22px;
margin-top: 20px;
padding:0;
}
span.h1 {
font-size: 24px;
font-weight: 600;
display: inline-block;
margin-top: 21px;
}
and remove line-height... http://jsfiddle.net/NbTvu/2/
How can I push the bottom margin up with about 5 pixels using css?
Here is the example about what I want to achieve:
Although you can do using line-height, it might screw up the next lines. So I suggest this:
h1 {
font-size: 24px;
border-bottom: 2px solid #FF6A00;
/* proposing line height + padding */
line-height: 20px;
margin-bottom: 5px;
}
You can do it with line-height:css rule.
set line-height: 18px; and that will do this trick.
Try this fiddle which uses padding.
padding-bottom: 5px;
You could do it with underlining. Like this:
h1 {
font-size: 24px;
padding: 0;
color: #FF6A00;
text-decoration: underline;
}
h1 span {
color: #000;
}
And then just put the text in h1 inside a span:
<h1><span>Szavazás az új domain-ról</span></h1>
See this this fiddle.
I have h1 tags with a span to have the first word in 1.4em and the rest in 1.2 em. If I write
.item.large h1 {
font-size: 1.4em;
padding-top: 0.3em;
margin-left: 0.4em;
}
.item.large h1 span {
font-size: 1.2em; // why is this not taken into account?
}
the words in the span are actually even larger than 1.4em, not smaller! Why is this unexpected growth happening and how do I style part of h1 tags correctly? Thanks!
Edit: If I use 0,857142857142857em for the span, I visually get 1.2em height, but that's not the way to do it, I'm sure...
em size unit is relative to the parent element. You can use rem unit to be relative to the document's main unit size, so to the constant one.
For the more information see http://snook.ca/archives/html_and_css/font-size-with-rem
Because em is a relative unit of measure (to its parent).
You can use this code on your CSS:
#title h1{
display: block;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#title h1>span {
display: block;
font-size: 11px;
color: #fff;
}
And in your HTML code:
<h1 id="title">My Title<br><span>My Second Title</span></h1>
Why height in Chrome is bigger than Firefox of input
See example here http://jsfiddle.net/jitendravyas/89Msh/1/
select, input, textarea, button {
font: 99% sans-serif;
}
input, select {
vertical-align: middle;
}
body, select, input, textarea {
color: #444444;
}
button, input, select, textarea {
margin: 0;
}
input, textarea {
font-family: inherit;
line-height: 1.5;
}
input {
border: 0 none;
font-size: 32px;
line-height: 1.1;
margin-right: 29px;
padding: 3px 3px 0;
width: 206px;
border-radius: 7px;
}
The problem is essentially line-height.
Chrome sees line-height much like it sees height and Firefox doesn't.
Adding height to the input should solve the problem, though you should be careful that your line-height and height match.
For example: height: 20px; line-height: 20px;.
http://jsfiddle.net/e2agj/1/ - Last example input is the correct one.
Simply try overflow:hidden on input
I usually use padding instead of height to push the total height of the input. Doing so, I do not have to fight around with the different interpretations of Chrome and Firefox.
I had the same problem and had to combine line-height AND padding to make things work.
I think it has to do with the way you styled the font for the input.
select, input, textarea, button {
font: 99% sans-serif;
}
Each browser has its own rendering for sans-serif, as that is really not a font.
Therefore, without a specific font set, you could expect some inconsistencies.
This should work in Chrome & Firefox on select elements:
height: 20px;
padding: 0;
I had gone throught same input line-height problem across Firefox , Chrome & Opera browsers. So I combined line-height , height and font-size for the appropriate look.
input {
line-height: 45px;
height: 45px;
font-size: 45px;
}
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}