CSS issue with relative sizes

StackOverflow https://stackoverflow.com/questions/483898

  •  20-08-2019
  •  | 
  •  

Question

I have this code

<html>
 <head>
  <style type="text/css">
   .frame                  {width: 50em; border: 1px solid black}
   .frame  label           {width: 20em; display: block; text-align:right; border: 1px solid green} 
   .frame label span       {width: 20em; display: block; font-size: .5em; border: 1px solid red; text-align: right}
  </style>
 </head>
 <body>
  <div class="frame">
   <label>
    Label
    <span>
     Span
    </span>
   </label>
  </div>
 </body>

The red <span> is set to 20em. But it should be as large as the green <label>. I want to keep the font-size small in the red part though. Unfortunately even if the font-size is half as large, I can't use 40em to get the same size. Any idea howto solve that problem?

Was it helpful?

Solution

If you don’t declare a width for the SPAN element (or width:100%), its property display:block would already make sure that its width would be the full available width.

OTHER TIPS

px is not an option as I do want to keep the design "scalable". I just found out, that it works with "width: 100%" for the span.

Note that using em's is relative to the containing em size. When using px's or pt's your size is relative to screen resolution. Which is why you were getting a 20em's worth of width for the red span when inside of a 20em label.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top