Given the following HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="base.css">
</head>
<body>
<label type="toggle-button">
<input type="radio" name="elementx">
Hello
</label>
</body>
</html>And the following CSS:
label[type="toggle-button"] {
border: 1px solid white;
color: white;
display: inline-block;
margin: 0;
padding: 16px;
}
label[type="toggle-button"] > input[type="radio"] {
display: none;
}The <input> should not be displayed (and thus not affecting the layout of the parent <label>), but it seems to be affecting layout:
In fact you can change the properties of the display: none; input, for example:
label[type="toggle-button"] > input[type="radio"] {
display: none;
padding: 64px;
margin: 64px;
}This renders as:
(This might be an issue in jStyleParser, not sure)
EDIT: An ugly workaround is to set the margin/padding to negative values:
label[type="toggle-button"] > input[type="radio"] {
display: none;
padding: -10px;
margin: -10px;
}
Given the following HTML:
And the following CSS:
The
<input>should not be displayed (and thus not affecting the layout of the parent<label>), but it seems to be affecting layout:In fact you can change the properties of the
display: none;input, for example:This renders as:
(This might be an issue in jStyleParser, not sure)
EDIT: An ugly workaround is to set the margin/padding to negative values: