• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

탭버튼 질문입니다

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

·

답변을 작성해보세요.

2

보더를 그리는데 인라인블록, 블록 여부는 관계없습니다.

인라인블록으로 한 이유는 크기값을 주고 가로배치를 유지하기 위함입니다.

아래 코드를 보시면 아시겠지만...

아마도 .btn a 에 padding을 안줘서 그럴거에요.

다른 방법은 .btn 자체를 margin-bottom을 -1픽셀로 주면 .btn 안에 a들이 아래로 내려갑니다.

.btn a 에 padding을 주시는게 편하실거에요.

.btn {
  /* margin-bottom: -1px; */
}
.btn a {
  border1px solid #000;
  border-bottomnone;
  width100px;
  displayinline-block;
  text-aligncenter;
  border-radius5px 5px 0 0;
  background-color#ddd;
  margin-right-6px;
  margin-bottom-1px;
  padding3px;
}

1

ohl0226님의 프로필

ohl0226

질문자

2021.03.15

자세한 설명 너무 감사드립니다!!