img行内块元素设置外边距

在HTML中，`img` 元素通常是内联元素，它的默认样式使其高度和宽度由内容确定，并不会影响周围的文本行高。然而，如果你想给 `img` 元素设置外边距（margin），你需要考虑其特殊的性质。因为 `img` 是内联元素，直接设置 margin 可能不会像块级元素那样对周围的内容产生预期的效果。

为了给 `img` 设置外边距，你可以采用以下几种方法：

1. 使用 CSS 盒模型：虽然 `img` 的 `margin` 对其本身不起作用，但它会创建一个包含框（containing block），在这个框内设置 `margin` 会影响图片与其他元素之间的间距。例如：

   img {
     display: inline-block; /* 将 img 设为行内块元素 */
     margin: 10px; /* 这将对包含框应用外边距 */
   }

2. 使用伪元素 `::before` 或 `::after`：可以插入一个空的 `span` 作为容器，然后为其设置外边距，这样可以间接地控制图片的外边距。

   <span class="margins">
     <img src="...">
   </span>

   .margins::before {
     content: '';
     display: inline-block;
     width: 100%;
     height: 0;
     margin: 10px 0; /* 此处的 margin 影响了 span 区域 */
   }

需要注意的是，如果 `img` 是行内元素并且设置了 `display: none;`，那么它就不再有包含框，所以边距也不会起作用。