css困扰的一个小问题

Question

我具体简单描述一下，UI给出的文字与图片的距离是28px；但是body给的行高line-height是1.6.这样文字有了行高之后与图片的距离明显不是28px；请问这个小问题要怎么解决？？

Answer 1

给文字加上css样式：margin-top:28px；

Answer 2

会不会是空格影响了高度，你将body的font-size设置为零试一下

Answer 3

肯定不是28了 要想一像素不差 文字还得 margin-top:-xxpx;

Answer 4

img标签display:block

Answer 5

假如font-size:12px，line-height导致文字上下多出12px0.6的空白。因为文字在行中是上下居中的，所以文字与图片间会多出12px0.3的空白，margin-top:28px-12px*0.3

Answer 6

你可以把body的行高去掉咯，或者你可以改成1，需要特殊改成1.6的地方就改成1.6咯。一般body的默认样式设置都是需要不对页面有过多影响的方式来设置的。body设置行高了，如果页面以文字展示为主，会很麻烦的，所以一般情况下body是不会设置行高，仅仅做一点默认样式处理就可以了

Answer 7

图片css
margin-bottom:-5px;
具体数值你可以自己调

Answer 8

虽然我一直没太注意,不过我一直的理解就是.. 比如字体的 font-size 是 14px 然后 line-height 是20px的情况下, 字体的上下空的像素就是各3px.. 你可以试试

Answer 9

对下面文字部分的行高设成和字一样的大小，比如font-size:16px;line-height:16px,然后用padding-bottom添加行间距`.

Answer 10

开了个脑洞：

img+p{
    margin-top: 28px;
}
img+p::first-line{
    line-height: 1;
}