space-between을 했는데 왼쪽에 마진이 생겨요

Question

.switch { display: flex; flex-direction: row; align-items: center; background-color: var(--keypad-bg); width: 100%; height: 27px; border-radius: 20px; padding: 0 5px; justify-content: space-between; input { appearance: none; &:checked + label { position: relative; &::after { display: inline-block; border-radius: 50%; content: ''; width: 18px; height: 18px; background-color: var(--equal-key-bg); } } } label { width: 18px; height: 18px; } }

위에 코드는 html 이랑 scss 코드 입니다 분명 justify-content: space-between 을 했는데 왜 왼쪽끝에 마진이 생기는건가요 ?뭐 하나씩 고쳐도 계속 답이 안나오네요 ㅠㅠ 왜그런지 알려주실 분 계신가요 ?

동생 · Answer

저거 해당하는 클래스가 뭔지 모르겠지만 width 18px로 고정시켜서 그런거 같은데여

하얀뼈 · Answer

.switch { display: flex; flex-direction: row; align-items: center; background-color: blue; width: 100%; height: 27px; border-radius: 20px; padding: 0 5px; justify-content: space-between; box-sizing: border-box;} .switch * { box-sizing: border-box; }

space-between을 했는데 왼쪽에 마진이 생겨요

2개의 답변

Q&A 목록