The use of negative margin is causing the legend's right border to move left by 2px, resulting in a reduction of the legend's width by 2px. Even when you apply width:0em to span.undo, the negative margin continues to affect the layout. However, this leads to the title text wrapping since legend now falls short by 2px.
To demonstrate this behavior, refer to the code comments.
* {
font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
font-size: 16px;
}
/* Making legend behave like a block element with width fit-content */
div {
border: 1px solid;
width: fit-content;
}
/* Undo icon as inline-block */
span {
display: inline-block;
}
/* Styling for title text */
span:first-child {
color: green;
}
/* Applying negative margins to undo elements */
.negative-margin1 {
margin-right: -20px;
}
.negative-margin2 {
margin-right: -40px;
}
.negative-margin3 {
margin-right: -49px;
}
<div class="one"><span>Foo efg </span> <span>undo</span></div>
<div class="two"><span>Foo efg </span> <span class="negative-margin1">undo</span></div>
<div class="two"><span>Foo efg </span> <span class="negative-margin2">undo</span></div>
<div class="two"><span>Foo efg </span> <span class="negative-margin3">undo</span></div>
As the negative margin affects the width, the inline text starts wrapping.
The visual output may vary slightly based on your font size, so here is the intended appearance:
https://i.sstatic.net/uT0Gc.png
To avoid using negative margin, we can make a minor adjustment by adding padding:
form {
max-width: 500px;
}
body {
font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
}
fieldset {
padding: 0;
}
fieldset>legend {
font-size: 90%;
margin-left: 0.5em;
/* Setting padding-right to zero */
padding-right: 0;
}
/* Adding 2px right margin for the title text */
span.ttl {
margin-right: 2px;
}
span.undo {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAAsTAAALEwEAmpwYAAADEklEQVQ4jY2UXSxbYRjHn/ecnm5lLFTbxdIlbENTq0x8JD62RBHRm/lKCBIXJGw3jbhtuCERVy6wyDJEYhLbMuKiDYmwIRITESQNq1LZaFg5ynrannN2ceR1VrT7X53n/f/PL8/7CXxQzdnnGicbg2cESeAW8cD3f+83mo3qSDUPPAJ0W1IQ4nn++ijDMs2W5r7lPp7npaS0VFOqCFNoFBp9nD5BnvC/oAP3QeXHytnd2etpAhHZ6uzWl6158XkBPQaCln8uV4xV2E/swWaBUP3z+u6ibhkluxk0YZ2o/lzt9rqDULD0cfrxqvFwKlwoyba2Nuyp76s1MRqaoffoPY7n8LiMkoVRYQzLiEE7Jzs7rp0STQlCKBBEkZRWqa3V1VY/q5bL5I5Th8vjAgCdSrf5ZjNLnWVz2fbpfZxfd65rFVqtUhs4tQD5Of+sfXZgdWDGPmM32imC8rE+o9nYu9yLM4nyxPXX6xJCEgyE5fK4IqWRJEECAMuxhg8Gy7YFu5YaS+HjQkIofKxvwbGw4dzg4QZu1N0ogQIAJEF26jsJRGDXvG0GAAIAPH5P/nB+9vts3VudacYUssGUBylJMUm4XPm1cgmy/LDM7c4BAMdzXfNdp57TkKxEeSL+Pjw/vASJ//SyXueFMyRIvLLCEScAIDYiVhzacG6EoAC/ebSJS+F3AgCSlckS4uoZGF4bDg5a2l/a+r2Fy7TYtEuQ6p4q42EGNsat41O2qdsoDMu0TLWIp1b8tPgShAA1pjVig+XYqk9V83vz1ykXvou6L3ViS6fS5TzKAXyy/Zw/812msJGCpKS0IbWhPrU+KSaJIqjjP8fmbXPHtw7rkRVnEEKTVZNCR1cne+1wLXcgl2bogC4i7kRQBEUztJ/zB1hNaU09hh5h1/65IuZtc/lY+bn3/LYFEqtMUzZSNiIlpUJJiL2iJ0WjZaOKMEVwBEKoRlcz+GoQUwI7EnTgPmj/2j60OnTmPbuOSI9NN70wGRIMIZ5aLJfHNW2bXnQsOmiHj/VFy6K1Sm1BfEGyMll8Y7H+AvtLjkoh3mWsAAAAAElFTkSuQmCC');
display: inline-block;
height: 13px;
width: 1em;
font-size: 13px;
background-repeat: no-repeat;
background-size: 13px;
margin-top: 2px;
/* Remove unnecessary margin */
/*margin-right: -2px;*/
}
legend>span.undo {
width: 0em;
}
fieldset.modified>legend>span.undo {
width: 1em;
}
div.description {
padding-left: 4px;
font-size: 90%;
}
<form>
<fieldset class="field">
<legend title=""><span class='ttl'>Foo configurator</span><span class="undo" title="Restore default"></span></legend>
<label title="">
<input name="foo_type" type="radio" value="123">Foo #1</label>
<div class="description">First foo</div>
<span class="field-content">
<label><input name="foo_enable" type="checkbox" value="value">Enable</label>
<span class="undo" title="Restore default"></span>
<div class="description">Zoppity</div>
</span>
</fieldset>
<fieldset class="field modified">
<legend title=""><span class='ttl'>Bar configurator</span><span class="undo" title="Restore default"></span></legend>
<label title="">
<input name="bar_type" type="radio" value="123">Bar #1</label>
<div class="description">First bar</div>
<span class="field-content">
<label><input name="bar_enable" type="checkbox" value="value">Enable</label>
<span class="undo" title="Restore default"></span>
<div class="description">Zoppity</div>
</span>
</fieldset>
</form>
Instead of relying on negative margins, adjusting the padding on the parent element can achieve the desired spacing.
In the current Chrome version (100.0.4896.88), default CSS properties assigned to legend elements are as follows:
legend {
display: block;
padding-inline-start: 2px;
padding-inline-end: 2px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
}
We should verify if these settings differ in earlier versions.