Joe Jacksson Joe Jacksson - 4 months ago 10
HTML Question

CSS/HTML - Change position of a certain part of a <p> using <span> not working as intended

I am trying to have the "fact" part further to the left than the remaining text. I figured this would do the job but for some reason the "fact" doesn't move at all. What's the problem here? (I'm using Chrome, not sure if that is relevant).

<head>
<style>
#fact0{
position: absolute;
top: 10%;
left: 20%;
}
</style>
</head>
<body>
<p id="fact0"> <span style = "left: 36%;"> Fact: </span> <br></br> Paris is the capital of France. </p>
</body>

Answer

Your "fact" span is statically positioned (i.e. it has the default value "static" set for its "position" property) inside its parent paragraph. By being statically positioned, it is not affected by the "left" property that you set to 36%.

If you want it to be affected by the "left" property, set its "position" property to "relative":

<head>
      <style>
       #fact0{
         position: absolute;
         top: 10%;
         left: 20%;
       }
      </style>
  </head>
  <body>
      <p id="fact0"> <span style = "left: 36%; position: relative;"> Fact: </span> <br></br> Paris is the capital of France. </p>
  </body>