How To Position An Image In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you how to position an image in HTML, in HTML, sometimes developers come in a problem that how to position an image in html. They know that how to insert an image in html but don’t know how to position it.
So, there are some ways with the help of which you are able to position an image. We will explain you how they work.
Step By Step Guide On How To Position An Image In HTML :-
As, there are three main and easy ways to position an image in html. That are:
- By using Margin
- By using padding
- By using positions
Now, as we know that there are three main methods to position an image. So, in next step we will show you that how they work.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<img src="source1.jpeg" alt="image one" style="margin: 100px 200px; width: 100px; height: 100px;">
<br><br>
<img src="source1.jpeg" alt="image one" style="padding: 0px 10px 0px 900px; width: 50px; height: 50px;">
<br><br>
<img src="source1.jpeg" alt="image one" style="position: relative; bottom:0; left:50px; width: 200px; height: 150px;">
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, here we create three image tags to show you three different types to position images.
- In first we use width and height attributes to give dimensions to image and margin to position image anywhere in website. You can increase and decrease margin as user’s choice.
- In second, we use width and height to give dimensions to image and then we use padding, as we know padding is used to increase and decrease space within element’s body and we use four different values to give padding differently to all sides.
- In third, we use width and height as previous tags to give dimensions to image and then we use position attribute to give it required position, if you don’t understand what position is then our position articles may help you in this. And after giving relative value to position we give it bottom and left, you can also use top and right or any other combination which you like.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, after reading this article now we understand how image can be positioned properly with which tag and the choice of tag in your.
I hope this tutorial on how to position an image in HTML helps you and you properly understand how to position an image and which tag you can use for this.
About Pragati
