Great question! Avoiding padding-right for your floating right-side buttons while keeping things responsive is totally doable. Here are a few practical, battle-tested solutions:

1. CSS Variables + Media Queries (Precise Breakpoint Control) #

This method lets you define consistent gaps across your buttons and adjust them for different screen sizes without repeating code. Perfect if you need fine-grained control over how the spacing changes on mobile vs. desktop.

Implementation: #

<button class="floating-btn">Action 1</button>
<button class="floating-btn">Action 2</button>

/* Base styles for buttons */
.floating-btn {
  position: fixed;
  right: var(--btn-right-gap); /* Use CSS variable for right spacing */
  bottom: 2rem;
  margin-bottom: 1rem; /* Vertical space between buttons */
  /* Add your custom button styles here: padding, background, border, etc. */
}

/* Set default gap value */
:root {
  --btn-right-gap: 1.5rem;
}

/* Adjust gap for smaller mobile screens */
@media (max-width: 768px) {
  :root {
    --btn-right-gap: 1rem;
  }
}

/* Widen gap for extra-large desktop screens */
@media (min-width: 1200px) {
  :root {
    --btn-right-gap: 2rem;
  }
}

Why this works: Instead of padding-right, we directly control the right position of fixed buttons using a reusable CSS variable. Media queries update this variable based on screen width, ensuring responsive spacing without messy repetition.

2. Viewport Units + calc() (Auto-Adaptive Spacing) #

If you want spacing that scales smoothly with the screen size without explicit breakpoints, use viewport units (vw) combined with calc(). This creates a gap that grows slightly on bigger screens and shrinks on mobile automatically.

Implementation: #

.floating-btn {
  position: fixed;
  right: calc(2vw + 12px); /* 2% of viewport width + 12px base gap */
  bottom: 2rem;
  margin-bottom: 1rem;
  /* Other button styles */
}

Why this works: vw units are relative to the viewport width, so the gap adjusts seamlessly as the screen resizes. Adding a fixed pixel value ensures there's always a minimum gap on tiny mobile screens.

3. Container Wrapper (For Button Groups) #

If you have a set of floating buttons, wrapping them in a container lets you manage the right gap once, instead of applying it to each button individually. This keeps your code cleaner and easier to maintain.

Implementation: #

<div class="btn-container">
  <button class="floating-btn">Action 1</button>
  <button class="floating-btn">Action 2</button>
</div>

.btn-container {
  position: fixed;
  right: 1.5rem; /* Gap between container and page right edge */
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Vertical space between buttons inside the container */
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .btn-container {
    right: 1rem;
  }
}

Why this works: The container handles the spacing from the page edge, and you use gap (or margin) to space out buttons internally. No padding-right is needed anywhere, and adjusting the container's right property makes responsiveness a breeze.

All these approaches keep your buttons anchored to the right with consistent spacing, avoid padding-right, and adapt seamlessly to different screen sizes. Pick the one that fits your project's needs best!

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