Skip to content

Elements with display: none should not affect the layout of other elements #73

Open
@soundasleep

Description

@soundasleep

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:

image

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:

image

(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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions