Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Empty label element's height is not 0 #2864

Open
1 task done
gjf7 opened this issue Dec 10, 2024 · 1 comment
Open
1 task done

Empty label element's height is not 0 #2864

gjf7 opened this issue Dec 10, 2024 · 1 comment
Labels
bug Something isn't working has repro We have a way to reproduce this bug. layout reduction of web content Issue has a simplified reduction based on real-world web content.

Comments

@gjf7
Copy link

gjf7 commented Dec 10, 2024 •
edited
Loading

Summary

Empty label element has height, and could affect by line-height.

Operating system

macOS

Steps to reproduce

  1. open the html beblow
  2. then you can see the empty label has height, despite inspector states that it has 0 height.

Expected behavior

Empty label element height should be 0. Chrome didn't have this issue.

Actual behavior

Empty label has a default height of 16px, which could be affected by the line-height.

URL for a reduced test case

N/A

HTML/SVG/etc. source for a reduced test case

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
    </head>
    <body>
        <nav class="site-nav">
            <label for="nav-trigger"></label>
            <div class="trigger">
                <a class="page-link" href="/about/">About</a>
            </div>
        </nav>
    </body>
    <style>
        .site-nav {
            line-height: 54px;
        }
    </style>
</html>

Log output and (if possible) backtrace

N/A

Screenshots or screen recordings

Ladybird:
image

Chrome:
image

Build flags or config settings

No response

Contribute a patch?

  • I’ll contribute a patch for this myself.
@gjf7
Copy link
Author

gjf7 commented Dec 10, 2024

Looks like this bug related to:

ladybird/Libraries/LibWeb/CSS/Default.css

Lines 23 to 26 in 4559af6

/* FIXME: This doesn't seem right. */
label {
display: inline-block;
}

@AtkinsSJ AtkinsSJ added bug Something isn't working reduction of web content Issue has a simplified reduction based on real-world web content. has repro We have a way to reproduce this bug. layout labels Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working has repro We have a way to reproduce this bug. layout reduction of web content Issue has a simplified reduction based on real-world web content.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AtkinsSJ @gjf7