change top position in a centered image...

Question

Hello there I try to move down some pixels an image I just centered, bhut it doesn't seem to happen!

Here is the code I have used so far...

.fearless{
       display: block;
    margin-left: auto;
    margin-right: auto;
  }

<img src="/toKoritsi/images/fearlessgirl.jpg" alt="fearless Girl"  class="fearless"/>

can anybody show me a proper way to move the image a bit closer to the bottom without changing anything else? thanks in advance...

Answer 1

Hello, the top edge of an element which is displayed block can be moved down by using margin-top

For example:

.fearless{
       display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

You can also condense these commands to:

.fearless{
       display: block;
    margin: 10px auto 0 auto;
  }

As an alternative, although I would try the above method first, you may try relative positioning and the top styles:

.fearless{
       display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top : 10px;
  }