html - 无法在 html 代码中设置元素大小的大小——只能通过样式表

Question

抱歉，如果之前已经回答过这个问题，但我无法在任何地方找到它。

我正在尝试创建一种缩略图库，但我无法在 html 代码中设置元素的宽度和高度。出于某种原因，如果我在样式表中设置大小而不是在代码本身中设置大小，它会起作用。我整晚都在试图解决这个问题，这让我发疯了。我希望这是我误解的简单事情。任何帮助将不胜感激。这是一个示例的链接：

CSS

.box {
display: block;
float: left;
margin: 0 20px 20px 0;
}
figure {
position: relative;
margin: 0;
padding: 0;
display: block;
}

HTML

<div class="box">
<figure width="800" height="800">
    <img src="http://placehold.it/400x300">
</figure>
<figcaption>Caption</figcaption>
</div>

澄清一下，我通过 html 代码执行此操作很重要，而且，我需要设置大小，而不仅仅是使用边距或填充...</p>

与往常一样，非常感谢您提供的任何帮助！

score 0 · Accepted Answer

属性应该放在img标签上，而不是figure标签上。

<figure>
    <img src="http://placehold.it/400x300" width="400" height="300">
</figure>

score 0 · Accepted Answer

当您想使用内联样式时，您必须使用“样式”属性。

<div style="property: value;">

score 0 · Accepted Answer

大多数 html 元素不支持宽度和高度作为属性，但您仍然可以通过 CSS 在样式表中或直接在 html 中的样式属性中设置它们的宽度和高度：

<figure style="width : 800px; height : 800px;">

（您似乎已经在样式表中设置了display:block。）

话虽如此，img 元素实际上确实允许宽度和高度属性，因此您可以在 img 上设置它们。

3 回答 3