如何去除按钮内边距？表格中按钮内边距与单元格对齐问题求助

Hey there! Let's work through this annoying padding and alignment problem you're dealing with—those unremovable spaces can drive anyone crazy after hours of troubleshooting. Let's break down the likely culprits and fix them step by step:

Common Causes & Fixes #

1. Table Cell (td) Default Padding #

First off, browsers add default padding to <td> elements by default—this is probably the red-labeled spacing you're seeing! You've zeroed out the button's padding/margin, but forgot the container itself. Add this to your CSS:

td {
  padding: 0;
  margin: 0;
}

2. Button Default Styles & Layout Issues #

Browsers also apply subtle default styles to buttons (like border, outline, or even line-height) that can create unexpected spacing. Plus, using <br/> to stack text can lead to inconsistent line heights (the pink arrow issue). Let's refactor the button's layout with flexbox for better control:

Update your CSS:

/* Reset button completely */
button {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  appearance: none; /* Removes browser-specific button styles */
  box-sizing: border-box; /* Ensures width/height includes all elements */
}

.day-button {
  width: 50px;
  height: 44px;
  overflow: hidden;
  display: flex; /* Use flex to stack text vertically */
  flex-direction: column;
  justify-content: center; /* Centers text vertically */
  align-items: center; /* Centers text horizontally */
}

.text-up {
  font-weight: bold;
  font-size: 14px;
  background-color: aquamarine;
  padding: 0;
  margin: 0;
  line-height: 1.2; /* Tighten line height */
}

.text-down {
  font-weight: bold;
  font-size: 10px;
  background-color: aquamarine;
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

Then update your HTML to remove the <br/> (flexbox handles stacking now):

<td>
  <button class="day-button">
    <span class="text-up">10</span>
    <span class="text-down">NONE</span>
  </button>
</td>

3. Table Alignment & Cell Misplacement #

If cells are still misaligning even when you increase the button height, add this to your table's CSS to enforce consistent layout:

table {
  border-collapse: collapse; /* Merges table borders */
  table-layout: fixed; /* Forces columns to use consistent widths */
}

This ensures all table cells follow the same sizing rules, eliminating unexpected shifts.

Quick Check List #

• Verify <td> has padding: 0
• Use appearance: none on buttons to strip default styles
• Replace <br/> with flexbox for better text stacking control
• Add table-layout: fixed to your table for consistent alignment

Give these changes a try—they should eliminate those stubborn spaces and fix the cell misalignment issue!

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