Html 为什么即使高度缩小，进度元素仍占据相同的垂直空间？_Html_Css_Progress Bar

Html 为什么即使高度缩小，进度元素仍占据相同的垂直空间？

html css

Html 为什么即使高度缩小，进度元素仍占据相同的垂直空间？,html,css,progress-bar,Html,Css,Progress Bar,如果减小图元的高度，它在视觉上会变小，但仍会占用与原始高度相同的空间 div{ 边框：1px纯蓝色； } 更大的进展，div按预期扩展正常进展进步越小，div就不会收缩。为什么？请检查此项 div{ 边框：1px纯蓝色；浮动：左侧；宽度：100%； } 进展{ 浮动：左 } 更大的进展，div按预期扩展正常进展进步越小，div就不会收缩。为什么？如果希望进度条填充整个div，可以使用此选项。但必须将显示：块样式添加到进度条中 div{ 边框：1px纯蓝色； } 部门进展

如果减小图元的高度，它在视觉上会变小，但仍会占用与原始高度相同的空间

div{
边框：1px纯蓝色；
}

更大的进展，div按预期扩展


正常进展


进步越小，div就不会收缩。为什么？

请检查此项

div{
边框：1px纯蓝色；浮动：左侧；宽度：100%；
}
进展{
浮动：左
}

更大的进展，div按预期扩展


正常进展


进步越小，div就不会收缩。为什么？

如果希望进度条填充整个div，可以使用此选项。但必须将

显示：块

样式添加到进度条中

div{
边框：1px纯蓝色；
}
部门进展{
显示：块；
}

更大的进展，div按预期扩展


正常进展


进步越小，div越小

div的行为与内容不符，所以我尝试了这个方法。我不知道这对你是否有帮助

<style>

div{
border: 1px solid blue;
}
progress {
vertical-align: top;
}
#div3{
height: 10px;
}

</style>

<body>
<div>
<progress max="100" value="33" style="height:30px"></progress>  
</div>
<br>

<div>
<progress max="100" value="33"></progress>
</div>
<br/>


<div id="div3">
<progress max="100" value="33" style="height:10px"></progress>
</div>
<br>

</body>


div{
边框：1px纯蓝色；
}
进展{
垂直对齐：顶部；
}
#第三组{
高度：10px；
}

之所以发生这种情况，是因为

progress

是

inline

元素，它从

父块继承行高
，以在progress
的上方和下方创建空间
这样可以从它们的对象继承可继承的属性
阻止父框。非继承属性具有其初始值
简短描述，了解内联、内联块和块级元素之间的区别
内联：内联元素前后没有换行符，并且
允许它旁边的HTML元素
内联块：内联块元素作为内联元素放置（在
与相邻内容相同的行），但其行为类似于块元素
块：块元素具有
上面和下面的空白，不允许任何HTML元素
在它旁边
在下面的演示中，您可以看到内联
和块
级别元素之间的差异
在第一个div
（.inline
）中，进度条从父块继承所有属性，除了背景和边距（这两个属性应用于元素本身），在第二个div
（.block
）中，没有任何属性被继承
换句话说，父块元素将其子inline
或inline块
级别元素视为与处理其中的text
相同

.inline，
.街区{
线高：100px；
字体大小：12px；
字母间距：20px；
空白：nowrap；
背景：ddd；
利润率：10px0；
}
.阻止进度{
显示：块；
}

您可以使用垂直对齐：顶部；或浮动：左@AlexandruSeverin检查我下面的答案，我希望它能帮助你理解这种行为的原因。@AbhishekPandey谢谢，确实如此。虽然我还不能给悬赏，但必须等一天。不要给悬赏，留7天也许你会得到更好的答案。我没有给你，但可能是因为当时你的解决方案不起作用。进度向上或向下显示，但仍占用相同的空间。我知道你已经成功了，所以我给你一个+1。display:block
似乎是正确的解决方案。但是在这个场景中，-webkit的出现有什么意义呢？即使没有它，它似乎也能工作。有人能解释div元素这种奇怪行为背后的原因吗？