탭버튼 질문입니다

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

[최종본 제작] 세로 2컬럼(C2타입) – Part2

작성

278

.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이 사라지지 않는지 궁금합니다!

html css 웹 디자인 HTML/CSS jquery

답변 2

코딩웍스(Coding Works)

지식공유자

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

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

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

아마도 .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;
}

ohl0226

질문자

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

인프런 커뮤니티 질문&답변

탭버튼 질문입니다