PlasmoHQ / docs

šŸ“˜ Documentation site
https://docs.plasmo.com
10 stars 48 forks source link

Mysterious margin in popup #109

Open Coordinate-Cat opened 6 months ago

Coordinate-Cat commented 6 months ago

The mysterious margin was confirmed when the background color was added. I tried to solve it with margin: 0;, padding: 0; but could not. There doesn't seem to be any margins in the html tag or in the body tag.

ć‚¹ć‚ÆćƒŖćƒ¼ćƒ³ć‚·ćƒ§ćƒƒćƒˆ 2024-04-18 午後9 07 46

// popup.tsx
import { useState } from "react"

function IndexPopup() {
  const [data, setData] = useState("")

  return (
    <div
      style={{
        width: 800,
        height: 800,
        margin: 0,
        padding: 0,
        backgroundColor: "#9bae48"
      }}>
      <h2>
        Welcome to your{" "}
        <a href="https://www.plasmo.com" target="_blank" rel="noreferrer">
          Plasmo
        </a>{" "}
        Extension!
      </h2>
      <input onChange={(e) => setData(e.target.value)} value={data} />
      <a href="https://docs.plasmo.com" target="_blank" rel="noreferrer">
        View Docs
      </a>
    </div>
  )
}

export default IndexPopup
// popup.html
<!doctype html>
<html>
  <head>
    <title>__plasmo_static_index_title__</title>
    <meta charset="utf-8" />
  </head>
  <body style="margin: 0; padding: 0"></body>
</html>
Coordinate-Cat commented 6 months ago

It appears that the <!doctype html> description was the cause of the problem.