button 여백에 관한 질문 (tailwind css)
본문
위의 사진과 같이 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 여서 css를 따로 쓰지 않고 사용하고 있는데 css border나 css 마진 패딩을 따로 쓴 적이 없습니다 혹시 제가 모르는 다른 방법이 있는 건가요 ??
개발자도구로 해서 부모랑 자식 css를 보여주세요
감사합니다 !
따로 스타일이 없다면 버튼간 줄바꿈하지팔고 붙여어 연속으로 만드세요
넵 시도해보겠습니다 감사합니다 !
tailwind 관련 질문은 여기에선 답변받기 어려울 겁니다. 다른 곳을 찾아보세요.
tailwind 사용하면서 고정된 너비와 높이를 이렇게 적극적으로 사용하는 경우는 처음 봅니다.
flex나 grid를 활용해보세요.
button 태그 사이에 공백이 끼어있으므로 1개로 축소되어 표현되므로 버튼 사이에 여백이 생긴겁니다.
아주 옛날옛적에는 태그 사이의 공백을 제거하거나 float 로 붙이는 방법을 사용했겠지만 아주 오래된 옛날에나 그랬던거고, 위와 같은 경우는 flex나 grid를 사용하여 해결할 수 있습니다.
넵 정말 감사합니다 !
