[Chip] Clickable area expands with line-height

[DiegoAndai]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-ryuspuxm?file=Demo.tsx
2. Click anywhere inside the black border box

Current behavior

The chip is clicked even though the pointer is outside the Chip.

Expected behavior

The chip should only be clicked when the pointer is inside the Chip.

Context

Found in mui/mui-x#16304

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 9.15.4 - ~/.nvm/versions/node/v22.2.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: 132.0.2957.115
    Safari: 17.5
  npmPackages:
    @mui/material: 6.4.1

Search keywords: Chip line-height

[DiegoAndai]

I think this should be considered a bug; what do you think, @aarongarciah?

[aarongarciah]

@DiegoAndai yes. Looks like the .MuiChip-label element should have an explicit line-height to avoid inheritance.