html中图片之间设置间距

今天我们来谈谈HTML中如何设置图片之间的间距。 HTML中，图片默认是紧密排列的，如果你想在两个图片之间留出一些空白，就需要设置图片的边距了。在HTML中，我们可以通过CSS来设置图片的边距。下面就是一个例子：

    
        <style>
            img {
                margin: 10px;
            }
        </style>

        <div>
            <h2>这是标题1</h2>
            <p>这是一段文字。</p>
            <img src="图片1.jpg">
            <img src="图片2.jpg">
            <p>这是另一段文字。</p>
        </div>
    

上面的代码中，我们在`img`标签的CSS选择器中设置了`margin:10px`，意思是图片四周留出10px的边距。这样，两张图片之间就会有一些空白了。 注意，这里我们为了方便把`img`标签放在了`div`标签中，实际上你也可以放在其他标签中，只要在该标签的CSS选择器中加入相应的样式即可。 HTML中还有另一种设置图片边距的方法，那就是使用`padding`属性。当然，这种方法只适用于`div`标签等容器标签，而不适用于`img`标签。 下面是一个用`padding`属性设置容器边距的例子：

    
        <style>
            .container {
                padding: 10px;
            }
            img {
                display: block;
            }
        </style>

        <div class="container">
            <h2>这是标题2</h2>
            <p>这是一段文字。</p>
            <img src="图片1.jpg">
            <img src="图片2.jpg">
            <p>这是另一段文字。</p>
        </div>
    

上面的代码中，我们在容器`div`的CSS选择器中设置了`padding:10px`，意思是容器四周留出10px的边距。同时，我们还设置了`img`标签的`display:block`属性，让图片变成块级元素，这样也可以实现图片之间的边距。 总之，不论是使用`margin`属性还是`padding`属性，都可以轻松设置HTML中图片之间的间距。只要在CSS中添加相应的样式，就可以达到想要的效果。