---
id: howto-css-button-group-vertical
title: "How To - Vertical Button Group"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["btn-group vertical CSS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.81
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "buttons"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_button_group_vertical.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Button Group Vertical]]

## 🎯 한 줄 통찰 (One-line insight)
Converting `[[HOWTO CSS Button Group]]`'s horizontal layout to vertical requires exactly TWO changes: swap `float: left` for `display: block` (stacking instead of side-by-side), and swap the border-collision fix from `border-right: none` to `border-bottom: none` (since adjacent edges are now top/bottom instead of left/right) — everything else (the `:not(:last-child)` selector, the hover color) carries over unchanged. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`display: block` instead of `float: left`** — makes each button occupy its own full line, stacking vertically. [S1]
- **`:not(:last-child) { border-bottom: none; }`** — the vertical analog of the horizontal group's `border-right: none`, preventing doubled borders between STACKED buttons instead of side-by-side ones. [S1]
- **No clearfix needed** — since `display: block` never removes elements from flow the way `float` does, there's no container-collapse risk to fix. [S1]

## 📖 세부 내용 (Details)
- `.btn-group button { display: block; width: 50%; border: 1px solid green; } .btn-group button:not(:last-child) { border-bottom: none; }`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **가로형 버튼 그룹과 정확히 두 부분만 다름**: `[[HOWTO CSS Button Group]]`의 float+clearfix+border-right 조합이 이번 레시피에서는 display:block+border-bottom(clearfix 불필요)으로 바뀐다는 점이 확인됨 — 나머지 로직(:not(:last-child) 패턴, hover 색상)은 그대로 재사용. [S1]

## 🛠️ 적용 사례 (Applied in summary)
Apple/Samsung/Sony 버튼을 세로로 쌓아 이중 테두리 없이 배치하는 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
Vertical button group — display:block + border-bottom fix (CSS):
```css
.btn-group button {
  display: block;
  width: 50%;
  border: 1px solid green;
}
.btn-group button:not(:last-child) {
  border-bottom: none;
}
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.81
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS Button Group]], [[HOWTO CSS Vertical Menu]]
- **참조 맥락:** CSS Buttons 섹션.

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Vertical Button Group — https://www.w3schools.com/howto/howto_css_button_group_vertical.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Vertical Button Group" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
