How to adjust the spacing between pictures in html

In

html, you can use the margin-left or margin-right attributes to adjust the spacing between images. These two attributes can set the left and right margins of the element respectively. You only need to add "margin- "left:value;" or "margin-right:value;" styles are sufficient.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Adjust the spacing between pictures in html

Create a new html file and name it test.html; in the test.html file, create a div and set Its class attribute is dd.

Inside the div, use the img tag to create two pictures. The picture names are 1.jpg and 3.jpg respectively.

In order to show obvious effects, style the div. Set the div width to 600px, height to 500px, center it, and set a 1px gray border.

In the test.html file, use the margin attribute to set the distance between the two images. For example, to set the distance between image 1.jpg and image 3.jpg to 30px, you can use the margin-right attribute to set it.

In addition, you can also use margin to set the top, bottom, and left margins of the image. They are as follows:

• margin-left: left margin;

• margin-top: top margin;

• margin-bottom: lower margin.

For example, use margin-left to set the left margin of image 3.jpg to 30px, which can also achieve the effect of the previous step.

margin You can also set the margins on all four sides of the picture at the same time, in order of "top, right, bottom, left", for example, set picture 1. The outer margins of jpg's "top, right, bottom, and left" are 10px, 20px, 30px, and 40px.

Recommended tutorial: "html video tutorial"

The above is the detailed content of How to adjust the spacing between pictures in html. For more information, please follow other related articles on the PHP Chinese website!