Inflearn コミュニティ Q&A
投稿した質問数
탭버튼 질문입니다
作成
·
345
2
.tab_inner > .btn > a에서 탭버튼의 border-bottom을 없애는 과정에서
border-bottom:none;
margin-bottom:-1px;
background-color:#fff;
display : inline-block을 주셨는데 , display : block을 줬을 때는 border-bottom이 사라지지 않더라구요..! 왜 block속성을 지정했을 때는 border-bottom이 사라지지 않는지 궁금합니다!
htmlcss웹 디자인HTML/CSSjquery
回答 2
2
codingworks
インストラクター
보더를 그리는데 인라인블록, 블록 여부는 관계없습니다.
인라인블록으로 한 이유는 크기값을 주고 가로배치를 유지하기 위함입니다.
아래 코드를 보시면 아시겠지만...
아마도 .btn a 에 padding을 안줘서 그럴거에요.
다른 방법은 .btn 자체를 margin-bottom을 -1픽셀로 주면 .btn 안에 a들이 아래로 내려갑니다.
.btn a 에 padding을 주시는게 편하실거에요.
.btn {
/* margin-bottom: -1px; */
}
.btn a {
border: 1px solid #000;
border-bottom: none;
width: 100px;
display: inline-block;
text-align: center;
border-radius: 5px 5px 0 0;
background-color: #ddd;
margin-right: -6px;
margin-bottom: -1px;
padding: 3px;
}
1
