Understanding Spacing
Proper spacing makes your pricing table breathe and improves readability. Too tight feels cramped, too loose feels disconnected.
Types of Spacing
- Padding: Space inside elements (inside columns, buttons)
- Margin: Space between elements (between columns, rows)
- Column width: How wide each pricing tier appears
- Row height: Vertical space for features
Adjusting Column Spacing
Column Width
Control how much horizontal space each column takes:
- Equal width (default): All columns same size
- Auto width: Adjusts based on content
- Custom width: Set specific pixel or percentage widths
Column Gaps
Space between columns:
- Compact (10px): Tight layout, more content visible
- Normal (20px): Balanced (recommended)
- Spacious (40px): Airy, premium feel
💡 Design Principle: White space is not wasted space. Generous spacing makes your pricing table feel premium and easier to scan.
Feature Row Spacing
Row Height
Adjust vertical spacing for feature rows:
- Compact: 40px - fits more features on screen
- Normal: 50px - comfortable reading (recommended)
- Spacious: 60px+ - luxury feel, fewer features
Feature Text Padding
Space around feature text within each cell:
- Tight: 8px - maximizes space
- Normal: 12px - balanced
- Generous: 16px+ - premium feel
Button Spacing
- Button padding: Internal space (height and width)
- Button margin: Distance from price above and features below
- Button width: Full width or auto-sized to text
Mobile Spacing Adjustments
Spacing automatically reduces on mobile, but you can customize:
- Mobile column gap: Usually 50% of desktop
- Mobile row height: Slightly reduced for space
- Mobile padding: Reduced to fit smaller screens
Layout Modes
Available Layouts
- Side by side: Columns display horizontally (default)
- Stacked (mobile): Columns stack vertically on small screens
- Slider: Swipeable carousel on mobile
- Accordion: Collapsible columns (advanced)
