How to move text in a display block div

Admin 1
Viewed 99

.score{
    font-size: 20px;
    text-align: center;
    background-color: white;
    width: 700px;
    height: 200px;
    border: 1px solid white;
    border-radius: 0px 0px 10px 10px;
    display: block;
    margin: 0 auto;
}
.score p span{
    padding-top: 100px;
}
    <div class="score">
        <p>bb<span id="correctAns">jkjh </span></p>
    </div>
I want to move my text down a little bit but it's not working, putting padding in .score just makes it bigger and nothing happens if I put it in .score p span.

css html
2 Answers

Nepotech's answer is correct. An other way is useing line-height for .score:

.score {
  font-size: 20px;
  text-align: center;
  background-color: white;
  width: 700px;
  height: 200px;
  border: 1px solid white;
  border-radius: 0px 0px 10px 10px;
  display: block;
  line-height: 100px;
}
<div class="score">
  <p>bb<span id="correctAns">jkjh </span></p>
</div>

user_170071840

Just Use margin-top to p element

  • Note: I have changed color to blue, for better understanding!

.score{
    font-size: 20px;
    text-align: center;
    background-color: blue;
    width: 700px;
    height: 200px;
    border: 1px solid white;
    border-radius: 0px 0px 10px 10px;
    display: block;
    margin: 0 auto;
}
p{
    margin-top: 100px;
}
<div class="score">
        <p>bb<span id="correctAns">jkjh </span></p>
    </div>

user_148628850
Related