[已解决]能否用css给阴影图片上下加空行来隔离 图片与其下的文本行？

blackantt

css给图片加阴影后，发现阴影与其后的文本行 行距不够大了。
能否用css给阴影图片上下加空行来隔离 图片与其下的文本行？

最佳答案

月排行榜 / 总排行榜

isdkz

2023-5-9 18:04:38

可以使用CSS的margin属性来给阴影图片上下加空行，从而隔离图片与其下的文本行。具体实现方法如下：

img {
  box-shadow: 2px 2px 5px #888888; /* 给图片添加阴影效果 */
  margin-top: 10px; /* 在图片上方添加10像素的空行 */
  margin-bottom: 10px; /* 在图片下方添加10像素的空行 */
}

在上述代码中，我们给图片添加了阴影效果，并使用margin-top和margin-bottom属性来分别在图片上方和下方添加了10像素的空行。你可以根据实际需要调整这些值来达到最佳效果。

需要注意的是，如果你想要在多个图片之间添加空行，可以使用CSS的选择器来选中这些图片并添加相应的margin值。比如：

img + img {
  margin-top: 20px; /* 在相邻的图片之间添加20像素的空行 */
}

在上述代码中，我们使用了相邻兄弟选择器（+）来选中相邻的图片，并添加了20像素的上边距，从而在它们之间添加了一个空行。

跳转到最佳答案楼层

isdkz

可以使用CSS的margin属性来给阴影图片上下加空行，从而隔离图片与其下的文本行。具体实现方法如下：

img {
  box-shadow: 2px 2px 5px #888888; /* 给图片添加阴影效果 */
  margin-top: 10px; /* 在图片上方添加10像素的空行 */
  margin-bottom: 10px; /* 在图片下方添加10像素的空行 */
}

在上述代码中，我们给图片添加了阴影效果，并使用margin-top和margin-bottom属性来分别在图片上方和下方添加了10像素的空行。你可以根据实际需要调整这些值来达到最佳效果。

需要注意的是，如果你想要在多个图片之间添加空行，可以使用CSS的选择器来选中这些图片并添加相应的margin值。比如：

img + img {
  margin-top: 20px; /* 在相邻的图片之间添加20像素的空行 */
}

在上述代码中，我们使用了相邻兄弟选择器（+）来选中相邻的图片，并添加了20像素的上边距，从而在它们之间添加了一个空行。