I have some HTML code equivalent to:
<div style="border: 1px solid black">
<fieldset style="margin: 0">
<legend style="margin-top: 20px;">testing....</legend>
</fieldset>
</div>
My question is why the margin-top on the legend is not rendered? I want to solve this problem using only CSS. Thanks!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you really want to do this, then set
legend { float: left; }:legend { float: left; }<div style="border: 1px solid black"> <fieldset style="margin: 0"> <legend style="margin-top: 20px;">testing....</legend> </fieldset> </div>Try using padding instead. This will work.
The reason why margin doesn't work is because the distance between the border and the text content is called padding instead of margin.
<div style="border: 1px solid black"> <fieldset style="margin: 0"> <legend style="padding-top: 20px;">testing....</legend> </fieldset> </div>