I am currently designing a web page with em units. I guess I don't understand it as well as I thought I did because a problem has occurred while I tried to align two separate span tags with margin-left. They were placed in the upper-left corner of my header. They were positioned on top of one another using display:block. When I used margin-right to align both the span tags, the larger span and the smaller tag didn't align correctly. I used the same number for margin-right, but they were still messed up.
Is this because I'm using em's?
How can I fix this?
I will paste the code I'm using below so you'll get a sense of what I'm working with. Hopefully I've explained this well enough.
HTML
<div class="header1">
<span class="title">Title goes here</span>
<span class="subtitle">This is the subtitle</span>
</div>
CSS
body {
color: #333;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 62.5%; /* 10px */
line-height: 1.28;
}
.main1 {
width: 96em;
/* horizontally center the website layout */
margin: 0 auto; margin-top: .8em;
text-Align: left; /* override body {text-align:center} */
}
div.header1 {
clear: both;
width: 100%;
height: 9em;
background: #ff0000;
color: #fff;
}
.title {
font: small-caps 700 3.7em "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}
.subtitle {
font-weight: lighter;
font-size: 1.4em;
}
The description of the problem is very confusing and does not explain what you want to achieve and what is your best attempt at that. You refer to left and right margin, but neither of them is set in your code for the elements discussed. You refer to setting display: block, but there is no such setting.
I will assume that you want the main title to appear (in the xy plane) above the subtitle. For this you need to set display: block or, better, use div markup instead of span or, best, use adequate heading markup such as h1 and h2 with due consideration of their default effects on vertical margins and font weight (i.e., overriding them in CSS if needed). And I assume that you wanted them left-aligned the same amount.
It seems that you did not take into account the relativity of the em unit. By definition, it equals the font size of the element (except in font-size, where it equals the font size of the parent element).
I suspect that you tried setting the left margin of both span elements using the same value such as 1em. But it does not mean the same for both elements, since their em sizes differ. If you wanted to set the their left margins to, say, the font size of the first element, you would set
.title { margin-left: 1em; }
.subtitle { margin-left: 2.6429em; }
The number 2.6429 is the ratio of the font sizes, calculated from 3.7/1.4.
It would be easier to just set a left margin on the enclosing div element. Its font size equals the font size of the body element, so if you wanted to set it to the font size of the main heading, you would use
div.header1 { margin-left: 3.7em; }
check the bellow link I hope this will help for you
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
px: pixels (a dot on the computer screen)
em: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
see the reference
So, you can use px instead em, its good practice.
Hope it will helps you. Thanks. !!
Related
This is my problem in short: https://jsfiddle.net/b6wLwkfs/
Long story: I have a div with some text in it. It initially creates some space on top and bottom of my div (this is not padding). I would like my div to only cover the text and not create extra space. This is my only css:
div {
background-color: black;
color: white;
font-size: 50px
}
<div>This is the text</div>
What I am looking for is to narrow down the div to only contains the text without creating any space on top of bottom. I acknowledge that if you tweaking a bit with px, you will achieve that but I am looking for more generic approach since font size will be different by cases.
Your code below is missing a (;) after font-size: 50px; now to achieve the space reduction I suggest you use line-height with the same font-size refer to my correction
Your Code
div {
background-color: black;
color: white;
font-size: 50px
}
My Correction
div {
background-color: black;
color: white;
font-size: 50px;
line-height: 50px;
}
There is likely no 'generic' way to do this, as that spacing you're seeing is actually part of the font face, and whatever adjustments you make to solve the 'problem' for this font, will not necessarily work on other fonts.
For example, just take a look at how Arial displays, as it's different than the default font that is used without setting a specific font-family, and as such a fix for the default font would likely have to be adjusted for Arial.
p {
background-color: black;
color: white;
font-size: 50px;
line-height: 1;
font-family: arial;
display: inline;
}
<p>
Oh hi i'm different
</p>
In the above snippet I've added a line-height of 1 to help normalize the spacing a bit. You could try to adjust further with setting the line-height to be at, or close to the exact font-size in pixels, but this will likely result in undesired spacing if you have lots of text in the element (text should also be in an appropriately semantic element like a p, or li, not just in a div).
In the end, can you achieve the result you're looking for? Definitely. Using things like line-height, margins and/or transforms. But you are likely not going to find a silver bullet to achieve the effect you want, consistently, if swapping out font faces.
As Sebastian Brosch mentioned in the question's comments, working off from Is it possible to change inline text height, not just the line-height? is likely going to be your best path forward.
I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...
You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.
Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.
Change:
line-height: 32px; to line-height: auto;
Try this
.highlightPhrase {
padding:5px;
}
I want the text to be perfectly aligned to the picture. But the text has some room on each side. This is supposed to be shown on different devices so just hardcoding like top : -3 px won't work.
Is there any way to make the text snap to the top of the div.
The blue area is the selection overlay that shows the div when I hover over the html element chrome inspect:
<div class="content-with-padding">
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" />
<span>
<div class="medium-title">Title</div>
<div class="small-text">Some text</div>
</span>
.medium-title {
font-size: 17px;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
.small-text {
font-size: 14px;
}
img {
float: left;
}
JSFiddle: https://jsfiddle.net/fx314qhh/
top:-3px won't work because it deals with positioning. More than likely you probably need to use padding-top:-3px;. If that doesn't, we'd need to see code because it is impossible to answer by looking at a picture
Try
line-height: 0
And adjust the margin-top: value.
Or a lower line-height value. (e.g., 1em line-height would be relative to the font-size as 1:1em)
Sicking to px in this scenario is your best bet for cross browser consistency.
Without code, it's going to be hard to identify the exact issue, but lets give it a shot.
All text has something called line-height which is the amount of space from the top of the font to the bottom of the font. Most fonts build in padding along the top to make multiple lines of text readable. CSS allows us to adjust that.
p {
line-height: 14px;
}
This code will tell all <p> elements to have a total line-height of 14px. If your font is taller than 14px it will overlap.
If this doesn't fix your problem, then the issue probably has to do with the margin/padding.
Try:
.medium-title {
font-size: 17px;
line-height: 0.8;
}
https://jsfiddle.net/fx314qhh/1/
I'm trying to achieve the equivalent of (I know it is not actually permitted in CSS) :
{padding-top : -3x }
In this original fiddle you can see that I want my h2 content to be aligned with the very top and bottom of the enclosing block element.
My -ve margin-left works, but a -ve margin-top moves the enclosing element upwards (taking the h2 with it). What I want is for the white letters to bleed into the background, so I need to be able to move the text to the top of the enclosing block element and reliably to set the vertical height of the <header> so that the bottom edge also bleeds into the background. So far it is very trial-and-error which I suspect will mean that it fails on other browsers, but I can't find any css options that do a better job.
Based on the first two first two answers, I have updated the fiddle, but I'm still left with the 3em font and 2.05em line-height for the container (and having heard that you should not generally add units to line height as well, which would lead me toward a line height of 0.7) and wondering whether that is a robust relationship (and if so how is it expressed mathematically) across all situations including mobile phones?
Why not just use a San-Serif font like Arial.. see Fiddle
#experience {
background-color: black;
position: relative;
margin: 0em 0;
line-height: 2.05em;
}
#experience h2 {
color: white;
text-transform: uppercase;
margin-left: -5px;
font-family: "Arial";
font-weight: bold;
font-size: 3em;
letter-spacing: 0.1em;
}
Cheers Adam
I have this code:
<h1>Windows Store<br /><span class="smallSubText">apps</span></h1>
and:
#windowsStoreApplications {
float: right;
width: 50%;
font-size: 16pt;
text-align: center;
height: 182px;
background-color: #9DCA87;
border-top: 6px solid #AEDF66;
}
.smallSubText {
font-size: 16pt;
}
As you can see, both the h1 and span are set to the same font-size - this is not how I want it but it's how I made it because I noticed that the font-sizes were not matching up to how they should be.
I made them both the same size to demonstrate that they are both the same size in code, but when you run the site and look at it - they're actually different sizes.
Is this due to some size weirdness with the h1 element?
If #windowsStoreApplications is a div, then you need to delclare a #windowsStoreApplications h1{} markup in your css and style the element with font-size:16px; there. You are not selecting the h1 element otherwise.
Well first, if you havn't declared a font-size for your h1's (and the rest) the browser defaults will be implemented which vary in size.
Second, you should not be using pt for your size, you should be using px, em or %.
#windowsStoreApplications h1 {
font-size:16pt; /* or preffered unit */
}