Question

所以我正在搞乱jsfiddle ..

http://jsfiddle.net/3mfnckuv/3/

对于那些玩Destiny的人来说，这就是Destiny的灵感哈哈......

但无论如何，有几个问题：）

1）为什么图像下方有空白区域？

2）我试图将图像和描述并排放置。我将图像包装在div中，然后使用内联块，而不是浮动。这是一个好方法吗？

3）如何移动描述div，更高并将其与图片的上边缘对齐？

4）我使用margin-left：-4px删除了由inline-bock引起的空格。这是一个好方法吗？

5）在身体和html上将宽度和高度设置为100％是一个好习惯吗？

<ul class="test-2">
    <li>
        <div class="image"><img src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"></div>
        <p>Invective</p>
     </li>
 </ul>

html, body {
    width: 100%;
    height: 100%;
}

.test-2 li {
    list-style-type: none;
}

.image, p {
    display: inline-block;
    border: 1px solid black;
}

谢谢你们

Answer 1

1）为什么图像下方有空白区域？

默认情况下，您图片的默认vertical-align为baseline。将其更改为top，bottom或middle以消除空白区域。

2）我试图将图像和描述并排放置。我将图像包装在div中，然后使用内联块，而不是浮动。这是一个好方法吗？

不确定。使用display: inline或display: inline-block时，图片与文字之间的HTML空格将在页面上呈现为空白区域。使用float: left时，空白区域已折叠。

3）如何移动描述div，更高并将其与图片的上边缘对齐？

在包含文字的元素上设置vertical-align: top。

4）我使用margin-left：-4px删除了由inline-bock引起的空格。这是一个好方法吗？

没有。那个空白区域是一个真正的空间角色。使用float: left折叠它或从您的HTML中删除它。

5）在身体和html上将宽度和高度设置为100％是一个好习惯吗？

也许。不会受伤。这是一个帮助列填充页面的技巧。今天我们可以设置min-height: 100vh。分别代表视图高度和视图宽度的vh和vw单位非常方便。

Answer 2

我认为我解决了你的问题。试试吧。您需要在img标记中创建图像类。另外，我把你的p标签放在与图像相同的div中。

这是CSS

 body {
width: 100%;
height: 100%;
}

.test-2 li {
list-style-type: none;
}

p {
position: absolute;
top: -1px;
left: 110px;
}

.image {
display: inline-block;
border: 1px solid black;
}

这是HTML中的div

<div><img class="image" src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"><p>Invective</p></div>

此外，当使用CSS时，你不必为身体放置html，只是身体会做得很好。

处理图像的正确方法（html，css）？

2 个答案: