2

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
JaPerk14
  • 1,664
  • 3
  • 24
  • 32
  • You say that you "positioned on top of one another using display:block" but all this does is convert the inline element to a block level element. You need to use `position: absolute;` to place them on top of one another. Do this, test what you have and reply back you continue to have issues. – gregwhitworth Dec 01 '12 at 07:44
  • It would make more sense if you use `
    ` and `

    Title

    Subtitle

    `
     – Madara's Ghost Dec 01 '12 at 08:43
  • Also, where's the `display: block` part? Where's the `margin-left:` part? They're missing from your code! – Madara's Ghost Dec 01 '12 at 08:47

3 Answers3

2

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; }
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

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/

Pawan Lakhara
  • 1,146
  • 4
  • 16
  • 28
  • I've seen the website before, but I still don't understand why my numbers are acting up. – JaPerk14 Dec 01 '12 at 06:21
  • [Link only answers are discouraged!](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers/8259#8259) Please write a full answer, instead of just providing a link. – Madara's Ghost Dec 01 '12 at 08:45
0

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. !!

Community
  • 1
  • 1
immayankmodi
  • 8,210
  • 9
  • 38
  • 55