HTML Image Border, Align, Padding and Margin

HTML provides several ways to add borders and align images on a webpage. Following section will explore some common techniques for adding borders and aligning images in HTML.

Adding a Border to an Image

To add a border to an image in HTML, you can use the "border" attribute in the <img> tag. The "border" attribute specifies the width of the border around the image, in pixels.

<img src="image.jpg" alt="Example image" border="1">
run this source code Browser View
Example image

In this example, added a border of 1 pixel around the image.

You can also use CSS to add borders to images.

<style> img { border: 1px solid black; } </style> <img src="image.jpg" alt="Example image">

In this example, used CSS to add a 1 pixel solid black border around the image.

Removing the Border from an Image

To remove the border from an image in HTML, you can set the "border" attribute to 0 or remove the attribute altogether.

<img src="image.jpg" alt="Example image" border="0">

In this example, set the "border" attribute to 0 to remove the border from the image.

<img src="image.jpg" alt="Example image">

In this example, removed the "border" attribute altogether, which also removes the border from the image.

Aligning an Image

To align an image in HTML, you can use the "align" attribute in the <img> tag. The "align" attribute specifies the horizontal alignment of the image with respect to the surrounding content.

<img src="image.jpg" alt="Example image" align="center">
run this source code Browser View
Example image

In this example, aligned the image to the center of the webpage.

You can also use CSS to align images.

<style> img { display: block; margin: 0 auto; } </style> <img src="image.jpg" alt="Example image">
run this source code Browser View
Example image

In this example, used CSS to center the image horizontally by setting the "display" property to "block" and the "margin" property to "0 auto".

You can also align images to the left or right of the surrounding text by setting the "align" attribute to "left" or "right".

<img src="image.jpg" alt="Example image" align="left">

In this example, aligned the image to the left of the surrounding text.

Adding Padding and Margin to an Image

To add padding or margin to an image in HTML, you can use CSS.

<style> img { padding: 10px; margin: 10px; } </style> <img src="image.jpg" alt="Example image">
run this source code Browser View
Example image

In this example, added 10 pixels of padding and margin around the image.

Making an Image Responsive

To make an image responsive in HTML, you can use CSS. One common technique is to set the "max-width" property of the image to 100%, which makes the image resize proportionally with the width of the viewport.

<style> img { max-width: 100%; height: auto; } </style> <img src="image.jpg" alt="Example image">
run this source code Browser View
Example image

In this example, made the image responsive by setting the "max-width" property to 100% and the "height" property to "auto". This ensures that the image resizes proportionally

Conclusion:

HTML offers various attributes such as border, align, padding, and margin to customize the display and spacing of images on a webpage. Border defines the thickness and style of the image border, align determines the horizontal alignment of the image, and padding and margin specify the spacing around the image.






Related Topics
  1. Attributes of img Tag in HTML
  2. How to use an image as a link in HTML
  3. HTML Image Maps
  4. How to HTML Image Thumbnails
  1. HTML Background Images