[分享]css内联元素有外边距吗

在CSS中，内联元素是指那些默认情况下与其他元素在同一行内显示的元素，例如、、等。然而，由于内联元素默认情况下是与其他元素在同一行内显示的，因此常常存在一些显示上的问题，例如“两个内联元素之间存在空白...

在CSS中，内联元素是指那些默认情况下与其他元素在同一行内显示的元素，例如<span>、<a>、<em>等。然而，由于内联元素默认情况下是与其他元素在同一行内显示的，因此常常存在一些显示上的问题，例如“两个内联元素之间存在空白”的问题。

在解决上述问题的时候，我们常会考虑利用CSS中的外边距（margin）属性。然而，这种做法是否适用于内联元素呢？

<span style="margin:10px;">这是一个内联元素</span>
<span style="margin:10px;">这是另一个内联元素</span> 

从上面的代码可以看出，虽然我们确实给内联元素设置了外边距，但是却没有起到任何作用。那么，为什么呢？

这是因为，内联元素虽然可以设置外边距属性，但是由于其默认情况下是与其他元素在同一行内显示的，因此它的外边距属性并不会影响到其他元素。

不过，虽然内联元素的外边距属性不能用于调整它与其他元素的间距，但是它仍然可以用于调整内联元素内部元素与其边框的距离。例如：

<span style="margin:10px; border:1px solid black;">
    <em style="margin:10px;">这是一个内联元素内部的元素</em>
</span> 

从上面的代码可以看出，我们给内联元素设置了外边距，并在其中嵌套了另一个元素（<em>元素）。虽然内联元素的外边距并没有对其他元素产生影响，但是它确实成功地调整了内部元素与边框之间的距离。

总之，如果您要调整内联元素与其他元素之间的间距，不能直接使用外边距属性，而是需要考虑其他的解决方法，例如使用display属性将内联元素转换成块级元素。