Design the distance between the HTML picture and the picture frame

 Designing the distance between the HTML picture and the picture frame can be designed by using the padding property of CSS . The padding is the so-called inner margin, which is used to adjust the distance between the elements in the box model and the frame. In the case of HTML preset pictures, the picture It is actually connected to the picture frame, so many people may never know that the picture has a frame. Web designers can use padding to increase the distance between the picture and the frame to increase the visual effect, or it can be matched with the shadow effect. Design a three-dimensional floating visual sense. The syntax of CSS padding property

padding: inner distance;

The padding property of CSS can be used as long as the padding is set. The padding can be set to four sides at a time or each side is designed separately. For detailed usage, please refer to our " CSS padding padding properties and usage The content of the " Example " article.

Practical example of designing the distance between HTML picture and picture frame

<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:5px;"><br>
<img src="upload/20151214185452.png" style="border:2px #ccc solid ;padding:10px;"><br>
<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:20px;">

The effect of the example





In order for readers and friends to see the effect of the distance between the HTML image and the image frame created by CSS padding , the example prepares a total of three pictures, and the distance between the image and the frame is set to 5px, 10px. And 20px, the larger the number, the greater the distance, the effect should be obvious! In addition, the border in the example grammar is used to set the border of the picture. Here we set the border thickness to 2px and the color to gray.