Put text at top of div

Question

In my javascript code, I need to put text at absolute positions on the screen, according to the top and left.

So, I put the text in a div, and instead put the div at the absolute position on the screen; BUT, that doesn't put the text into the top-left corner of the div, which I want. How do I do this?

I tried additionally wrapping the text in a span, to try to use vertical-align with that, but that doesn't work either.

.a {
  position: absolute;
  display: block;
  background-color: red;
  font-size: 50px;
  color: gold;
  margin: 0px;
  padding: 0px;
  text-align: left;
  vertical-align: top;
}
.b {
  background-color: blue;
  vertical-align: top;
  text-align: left;
  margin: 0px;
  padding: 0px;
}

<div class="a">
  <span class="b">Put Text At Top</span>
</div>

Please note as the font size varies, I don't want to use some fixed negative margin as I read in another answer.

I don't get it, sorry. The div changes its size on different font sizes. Your div does not have a fixed height and width. The text is always on the upper left. See http://jsfiddle.net/msLdub68/ What do you want exactly? Can you link to the other question/answer that suggests negative margins? — Christian, Aug 06 '22 at 23:57
@Christian, Besides specifying top and left in %,, the end-user also gets to indicate how wide the content should be, in %. "Off screen", I then figure out the largest font-size that will fit inside that width, using the clientWidth property of the div. My issue is still making the text display where it's targeted, just like the end-user can for images, or other items. Here is one place someone suggested making the top-margin negative: https://stackoverflow.com/questions/9534501/html-css-div-not-aligning-at-top-of-page — Mark, Aug 07 '22 at 00:06
Ah, thanks for clarifying. The linked question is about moving the div up, right? The famous margin: 0 on the body problem. Your challenge is special indeed. — Christian, Aug 07 '22 at 00:23
@Christian - given the browser specifies things using top and left, and absolute positioning is one kind of positioning, this should be straightforward. — Mark, Aug 07 '22 at 00:37

Johannes · Accepted Answer · 2022-08-07T00:39:50.083

0

Use line-height: 100%;to make the line the same height as the font itself. Note: There can be still some space between the top of the uppercase characters and the top of the line, but that's due to the font design - in this case not all uppercase characters extend to the maximum height available.

.a {
  position: absolute;
  display: block;
  background-color: red;
  font-size: 50px;
  color: gold;
  margin: 0px;
  padding: 0px;
  text-align: left;
  vertical-align: top;
  line-height: 100%;
}
.b {
  background-color: blue;
  vertical-align: top;
  text-align: left;
  margin: 0px;
  padding: 0px;
  line-height: 100%;
}

<div class="a">
  <span class="b">Put Text At Top Ö É $ Å Ñ</span>
</div>

edited Aug 07 '22 at 00:39

answered Aug 07 '22 at 00:07

Johannes

64,305
18
73
130

Thanks for your reply. Can you identify just one uppercase letter, where it goes up to the top of the span or div? I'm fine getting rid of the span – Mark Aug 07 '22 at 00:21
... I updated my fiddle to use the alphabet in caps, and none went to the top, also the numbers 0-9. – Mark Aug 07 '22 at 00:25
1

That will always depend on the font - here the default font of the browser is shown, which can vary. But I added some non-english characters to the snippet above which even go above the top. – Johannes Aug 07 '22 at 00:32
So then how do you think the browser is determining the top? – Mark Aug 07 '22 at 00:43
The line-height ( = the blue area) is exactly the 50px font-size you defined. It depends on the font designer how the single chacters fill that space. You can't do anything about it, except maybe choose a webfont whose uppercase characters actually fill the full height defined by the font-size. What I meant about the browser is that - if no font is defined - each browser has a default font, which can be different between browsers and especially OSes. The safest thing is to use a webfont which comes close to wwhat you want. – Johannes Aug 07 '22 at 08:49
the line-height has no impact on the blue area here. make it 200% and see the result. That blue area (called content area) cannot be controlled using line-height and only depend on the font properties – Temani Afif Aug 07 '22 at 09:28
1

@Johannes -- thanks for your answer, that helps. I'm too new to add an upvote unfortunately. – Mark Aug 07 '22 at 15:33
@Temani Afif -- the lineheight of 100% does remove the extra red from the div content (background) that's behind the span. – Mark Aug 07 '22 at 15:34
@Mark make the blue a bit transparent to see what is happening. The line-height only change the height of the line-box (which is illustrated with the red background here) but will have no impact on the blue area and you will notice that the blue area is bigger than the red one as well. Line-height cannot change what you are looking for (refer to the duplicate for more detail). All you can do with line-height is a trial & error until you get a suitable value for your particular case. There is no generic solution because the font control this – Temani Afif Aug 07 '22 at 15:47
...which I wrote in my second comment... – Johannes Aug 07 '22 at 16:53

Put text at top of div

1 Answers1