How to Create Border Space in a CSS Image
Adding space between a border and an image is achieved using the "padding" property in Cascading Style Sheets (CSS) code. When you create a class for your image, you can then reuse it for other images on your website and write CSS code to create the desired effect. Give the class padding and a border, and then add a background color if you want to add color to the space between the image and the border.
Other People Are Reading
Instructions
-
-
1
Open the file for your Web page containing the image in Notepad or a code editor. Locate the "<img>" tag for the image where you want to create the border space:
<img src="path/to/image.png" alt="My Image" />
Add a class name to your image:
<img src="path/to/image.png" alt="My Image" class="myborder" />
-
2
Go to the "<head>" tags of your file and look for "<style>" tags. Add those tags if you do not find them there:
<style type="text/css">
</style>
-
-
3
Write your CSS code between the "<style>" tags. Target your image by its class name:
.myborder {}
-
4
Add a border to your image using the "border" property of CSS:
.myborder {
border: 1px solid #bbb;
}
The above code creates a 1-pixel-wide, solid border of a medium-gray color.
-
5
Set the "padding" property of CSS to your image to create space between your border and the image:
.myborder {
border: 1px solid #bbb;
padding: 10px;
}
-
1
Tips & Warnings
Add a background color to your image to give the space between the border and the image a color.
Add your class name to any other image where you want to use this effect. The advantage of classes in HTML and CSS is you can use them any number of times you like.
