-
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
미해결
탭버튼 질문입니다
21.03.12 22:00 작성 조회수 138
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이 사라지지 않는지 궁금합니다!
답변을 작성해보세요.
2
코딩웍스(Coding Works)
지식공유자2021.03.12
보더를 그리는데 인라인블록, 블록 여부는 관계없습니다.
인라인블록으로 한 이유는 크기값을 주고 가로배치를 유지하기 위함입니다.
아래 코드를 보시면 아시겠지만...
아마도 .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
답변 2