How To Move An Image Down In HTML — [SOLVED]
Moving an image down in HTML is quite easy. But there are some tricks you might want to know.
P.S. check out The Best Programming Language For Finance
TL;DR Summary
To move an image down in HTML it’s best to use “margin-top” CSS property. For example you can do “margin-top: 100px;” when you want to move an image down by 100 pixels.
Here is the minimal code you need to accomplish this:
And this is the final result:
More Details
By default margin-top will push all of the content that is below that element down and this is not what you always want.
This might sound confusing so let me explain…
Let’s say we have initial situation like this:
And now let’s say we move the image down with margin-top CSS property.
Here is the code:
Then this is how it will look like in the browser:
Notice on the image above how the text “hello” was also pushed down as much as the image above it. In other words it kept it’s distance from the image.
But there is another way you can move the image down without pushing the text as well.
This can be done with position: relative; CSS property.
This is the code:
And here is how this looks like in the browser:
As you can see the image was moved down but other content (namely our “hello” text) stayed exactly where it was without any movement.
And this is really all there is to moving an image down in HTML using either margin-top or position: relative; CSS properties.
Also, make sure to check out JavaScript img onclick article. And you might find interesting articles about textarea default value and html input currency.
Until next time,
Will
Creator of Developer’s Report:
The Best Programming Language For Finance
