求助：CSS无法移除内边距/外边距问题，附HTML与Sass代码

Hey there! Let's fix that stubborn padding/margin issue with your 10x10 tile grid. Here are the most common solutions to try, ordered by how likely they are to resolve your problem:

1. Add a Global Style Reset & Fix Box-Sizing #

Browsers apply tiny default margins/paddings to some elements (even divs can inherit unexpected spacing in rare cases), and the box-sizing property is often the culprit for unexpected element sizing. Start by adding this to your Sass to eliminate default styles and ensure padding/borders don't bloat your tiles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box-sizing: border-box makes sure any padding or borders you add to .tile or .tile-row are included in their defined width/height, instead of adding extra space outside the element.

2. Audit Your .tile-row and .tile Styles #

Double-check that your row and tile styles aren't accidentally adding spacing. For example, if you're using flexbox for rows (a common choice for tile grids), make sure you haven't set unintended gap, margin, or padding:

.tile-row {
  display: flex;
  margin: 0; /* Remove any default or accidental margin */
  padding: 0; /* Remove any default or accidental padding */
  gap: 0; /* Remove this only if you don't want space between tiles */
}

.tile {
  width: 100px; /* Or 10% if you want them to fill the row width */
  height: 100px;
  margin: 0; /* No extra margin between tiles */
  padding: 0; /* No internal padding unless you need it */
  /* Optional: Add a border to visualize tiles without spacing */
  border: 1px solid white;
}

3. Lock Down the #root, body, and html Styles #

Your base styles are close, but let's make sure there's no hidden spacing here. Update them to explicitly set width and remove any inherited spacing:

body, html {
  overflow-x: scroll;
  padding: 0;
  margin: 0;
  background-color: black;
  color: white;
  width: 100%; /* Ensure the base takes full viewport width */
}

#root {
  margin: 0;
  padding: 0;
  width: fit-content; /* Let the container grow to fit all tile rows */
}

width: fit-content on #root ensures your grid container doesn't get constrained to the viewport width (which can cause unexpected overflow or spacing if your tiles are wider than the screen).

4. Check for Inherited Styles #

If none of the above works, use your browser's DevTools (right-click > Inspect) to hover over the #root, .tile-row, and .tile elements. Look at the "Computed" tab to see if any unexpected margin/padding is being inherited from a parent style or a browser default you missed.

内容的提问来源于stack exchange，提问作者max pleaner