span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

헉 그렇네요..!! 수정하니까 잘 작동하네요~~!! 감사합니다....!!ㅎㅎ

span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

쇼핑몰 UI hover 이펙트 (width JQUERY) (사진) NightgownWomen's Designer Wear $55.99 Size XS S M L XL Colors Add to Cart $('.size span, .color span').click(function(){ $(this).addClass('active'); $(this).siblings().removeClass('active'); }); $('.like').click(function(){ $(this).toggleClass('active'); }) html과 script 코드고요/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Montserrat', sans-serif; background-color: #eee; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; color: #222; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* item */ .item { border-radius: 5px; overflow: hidden; /* border-radius: 5px; 때문에 준 것이기도 하지만 .detail의 넘치는 부분을 가리기 위함도 있음. */ position: relative; box-shadow: 0 0 20px #0000003a; } .item img { transition: 0.5s; } .detail { background-color: #f8f8f8; position: absolute; /* 속성이 inline-block으로 바뀌기 때문에 width 값이 없으면 반영 안됨 */ width: 100%; bottom: -177px; left: 0; height: 250px; transition: 0.5s; padding: 5px 20px; box-sizing: border-box; } .item:hover .detail { bottom: 0; } .item:hover img { filter: blur(2px); } /* title */ .title { overflow: hidden; border-bottom: 1px solid #ddd; margin-bottom: 15px; } .title h2 { font-size: 16px; color: #888; line-height: 1.2em; float: left; } .title h2 em { font-style: normal; display: block; color: #000; margin-bottom: 5px; } .title span { float: right; margin-top: 15px; font-size: 18px; color: crimson; } .info { position: relative; } /* Size */ .size { margin-bottom: 10px; } .size label, .color label { display: block; /* label은 inline 요소 */ margin-bottom: 5px; } .size span, .color span { transition: 0.5s; } .size span { font-size: 12px; margin-right: 5px; width: 15px; height: 15px; display: inline-block; /* span은 inline 요소 */ text-align: center; line-height: 15px; padding: 3px; border-radius: 3px; cursor: pointer; } .size span.active, .size span:hover { background-color: #000; color: #fff; } .color span { /* border: 1px solid #000; */ width: 17px; height: 17px; display: inline-block; /* span은 inline 요소 */ /* 이상한 margin이 생기는건 음수마지 곧 네거티브 마진을 쓰는 방법도 있고 font-size: 0 이렇게 주는 방법도 있음. 정교하게 만들거나 반응형을 위해 모바일에서 세로배치가 필요할 때는 display: block;으로 가로 정렬 해주기. */ margin-right: 5px; cursor: pointer; } .color span:active, .color span:hover { border-radius: 50%; } .color span:nth-of-type(1) { background-color: #808000; } .color span:nth-of-type(2) { background-color: #ff0000; } .color span:nth-of-type(3) { background-color: #ffc0cb; } .color span:nth-of-type(4) { background-color: #00ffff; } .color span:nth-of-type(5) { background-color: #0000ff; } .add-cart { border: 1px solid #ddd; width: 100%; padding: 7px; background-color: #fff; cursor: pointer; margin-top: 10px; /* input이랑 button은 inline-block 요소 */ } .add-cart:hover { background-color: #000; color: #fff; } /* Like */ .like { cursor: pointer; } .like:before { content: '\f08a'; font-family: fontawesome; color: #ccc; position: absolute; right: 0; top: 0; } .like.active:before { content: '\f004'; color: crimson; }css 코드입니다!!ㅠㅠㅠㅠ 빠르게 답변해주셔서 정말 감사합니다...!!ㅠㅠㅠㅠ

span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

(사진)(사진)스크립트까지 다 적었는데도 .color span 부분 스크립트 적용도 안되네요...ㅠㅠ나머지 css들은 잘 들어갔는데 margin이랑 스크립트 부분은 어디서 잘못 입력했는지 잘 모르겠어요....ㅠㅠ