如何实现黑色边框与黄色边框完全重叠对齐

Got it, let's fix that border overlap issue! The problem right now is that the button's black border is sitting inside the label's yellow border because of how browsers calculate element sizes and layout by default. Here are two reliable ways to get those borders perfectly aligned:

Method 1: Negative Margin Offset #

This works by pulling the button outward by the exact width of its border, so it overlaps with the label's border directly. It keeps the button in the document flow if you need it to affect surrounding elements:

label {
  display: block;
  width: 200px;
  height: 54px;
  border: 1px solid gold;
  border-radius: 4px;
}
.upload {
  border: 1px solid black;
  border-radius: 4px 0px 0px 4px;
  display: block;
  height: 100%;
  width: 100px; /* Adjust to your desired button width */
  margin: -1px; /* Offset by border width to overlap label's border */
  padding: 0; /* Remove default button padding to avoid extra space */
}

Method 2: Absolute Positioning #

If you want precise control without worrying about flow layout, absolute positioning is a clean solution. We'll make the label a positioning context for the button:

label {
  display: block;
  width: 200px;
  height: 54px;
  border: 1px solid gold;
  border-radius: 4px;
  position: relative; /* Establishes positioning context for the button */
}
.upload {
  border: 1px solid black;
  border-radius: 4px 0px 0px 4px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100px; /* Adjust to your desired button width */
  margin: 0;
  padding: 0;
}

Either approach will make the black and yellow borders overlap perfectly. The negative margin method is great if you need the button to interact with other elements in the flow, while absolute positioning gives you more control over exact placement without affecting surrounding content.

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