Unable to set top margin

Unable to set top margin
0

#1

Unable to set top margin or top for the image refer screen shot.

HTML :

 <body>
        <div id = "main">
            <div id = "headerContainer">
               <img src = "./assets/animation1.jpg" alt = "welcome Image" class = "welcomeImg">
            </div>
        </div>
    </body>

CSS :

#headerContainer{
    background-color: #eeee;
    width: 100%;
    height: 500px;
}
.welcomeImg{
    max-width: 80%;
    height: 80%;
    display: block;
    margin: auto;  
}

Please helphtml


#2

Hi, you should be able to add margin-top: 20px (for example) after the margin: auto; line. CSS takes precedence in order of lines. A good way to troubleshoot CSS is to right-click the element you want to work on (the image in this case, and inspect) look for the styles tab, and try out different CSS settings in real-time by editing element.style. For margin and padding remember TeRriBLe for the top,right,bottom,left order of editing for example, this might work for you… margin: 20px, auto, 0px, auto
(Top,Right,Bottom,Left- terrible!) Apologies if you know all this already…


#3

Please @sanjeev.kumar, add a https://codepen.io link with your code.


#4

@SidVal attached code pen link:

@jdpunk1 it did not worked, no issues. Thanks for sharing your knowledge.


#5

How can you try to add the margin?

Y added: margin: 50px auto;

Check this: https://codepen.io/SidVal/pen/PdjbvM


#6

@SidVal you can clearly observe that when we give margin-top value the headcontainer is also moving. you can notice the background color. what i want is margin from the headcontainer div , so that the background stays and the image is placed in that little down from top.


#7

add display:inline-block; to your container element…

I grabbed this from Mozilla docs (default position is static):
If the position property is static or relative, the containing block is formed by the edge of the content box of the nearest ancestor element that is a block container (such as an inline-block, block, or list-item element) or which establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).

Basically- a block goes rogue unless it is inside another block-type element. The additional padding you’ll see around the container when you apply this is from the body element I think. As a rule of thumb your containers should be blocks I guess…


#8

@jdpunk1 it did not worked.


#9

Seems okay for me, see thee screenshot


#10

@jdpunk1 thanks mate it worked.