When using the legend, an indent appears below it and everything looks uneven:

Without using the legend, everything is fine:

enter image description here

How to remove the indent from the bottom of the legend?

fieldset {border: 1px solid #cccccc; padding: 10px} 
 <fieldset> <legend>title</legend> message </fieldset>

https://jsfiddle.net/ps0sL763/

    1 answer 1

    padding: 10px , what's stopping you. Because The legend itself takes the place:

     fieldset { border: 1px solid #cccccc; padding: 10px; padding-top: 0; } 
     <fieldset> <legend>title</legend> message </fieldset>

    UPD

     legend{ margin-bottom:-10px; } fieldset { border: 1px solid #cccccc; padding: 10px; } 
     <fieldset> <legend>title</legend> message </fieldset>

    • this is not at all. - ModaL
    • @ModaL what is wrong? - C.Raf.T
    • You removed the top indent in the fieldset. I need to remove the bottom indent from the legend, since it is thanks to the legend that there is no unnecessary indent. - ModaL
    • @ModaL can be different ... - C.Raf.T
    • I had this option too. In general, as I understood, there is no more normal solution, so I will accept your answer. Thanks :) - ModaL