[分享]css加图片后行距不起作用

CSS加图片后行距不起作用在网页设计中，经常会使用CSS对文本和图片进行排版，以展示完美的界面效果。然而，有时候会出现一种奇怪的问题：图片与文本间的行距不起作用，导致排版混乱。这个问题的原因在于，CS...

CSS加图片后行距不起作用

在网页设计中，经常会使用CSS对文本和图片进行排版，以展示完美的界面效果。然而，有时候会出现一种奇怪的问题：图片与文本间的行距不起作用，导致排版混乱。

这个问题的原因在于，CSS的默认行高只与文本相关。当图片出现在文本中时，行高并不会根据图片的大小作出适当调整。

p {
   line-height: 1.5;
   text-align: justify;
}

img {
   vertical-align: middle;
} 

上述CSS代码展示了如何定义段落的行高以及图片的垂直对齐方式。然而，即使指定了合适的行高和垂直对齐方式，仍然可能出现图片与文本品行距不协调的情况。

解决这个问题的方法很简单，只需要为图片添加一个display属性即可：

img {
   vertical-align: middle;
   display: block;
} 

通过为图片添加display:block，可以使图片单独占据一行，从而避免与文本行距不协调的问题。

当然，还有其他方法可以解决这个问题，例如为文本和图片的容器添加overflow:hidden属性，但这种方式不如上面的方法简单明了。

在网页设计中，排版是至关重要的。希望以上的解决方法可以让您更加准确地控制文本和图片之间的行距。