button 여백에 관한 질문 (tailwind css)

button 여백에 관한 질문 (tailwind css)

QA

button 여백에 관한 질문 (tailwind css)

본문

3067972807_1699692889.5932.png3067972807_1699692898.9939.png

위의 사진과 같이 button을 나열하였는데 사이 공간에 여백을 준적이 없는데 여백이 있이 나와서 메일광고 칸이 아래로 내려오게 됩니다 ! 혹시 아시는 분 도와주시면 감사하겠습니다 !

이 질문에 댓글 쓰기 :

답변 4

구조를 바꾸지 않고서는 답이 없을듯 합니다. css로 바꿔보시는게 좋을듯합니다.

이런식의 버튼을 바꿔보세요
<style>
  .button { display: flex; justify-content: space-between; width: 100%; }

  .button button {
    background-color: #3a425d;
    color: white;
    width: 240px;
    height: 50px;
    margin-right: 10px; /* 여백사이값 */
  }

  .button-container button:last-child { margin-right: 0; }
</style>

<div class="button">
  <button type="button">전체</button>
  <button type="button">잡코리아</button>
  <button type="button">알바몬</button>
  <button type="button">메일광고</button>
</div>

css border 확인해보세요 여기서 뭐 display:inline-block 이 있으면 flex로 해보세요 

아님 플롯도 괜찮구요 그리고 버튼 css에 보면 마진 패딩도 확인해보세요

따로 스타일이 없다면 버튼간 줄바꿈하지팔고 붙여어 연속으로 만드세요

tailwind 관련 질문은 여기에선 답변받기 어려울 겁니다. 다른 곳을 찾아보세요.

 

tailwind 사용하면서 고정된 너비와 높이를 이렇게 적극적으로 사용하는 경우는 처음 봅니다.

flex나 grid를 활용해보세요.

 

button 태그 사이에 공백이 끼어있으므로 1개로 축소되어 표현되므로 버튼 사이에 여백이 생긴겁니다.

아주 옛날옛적에는 태그 사이의 공백을 제거하거나 float 로 붙이는 방법을 사용했겠지만 아주 오래된 옛날에나 그랬던거고, 위와 같은 경우는 flex나 grid를 사용하여 해결할 수 있습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT