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 help
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…
@SidVal attached code pen link:
@jdpunk1 it did not worked, no issues. Thanks for sharing your knowledge.
How can you try to add the margin?
Y added: margin: 50px auto;
Check this: https://codepen.io/SidVal/pen/PdjbvM
@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.
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…
