html, css 공백, 띄어쓰기 제거 방법

* 띄어쓰기 없애는 방법 

원래 코드

html

<div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
</div>

css

span{
  background-color: gray;
  padding: 0px 20px;
}

결과

span 태그 사이에 공백이 존재한다.

 

방법 1) 한줄에 작성하기

<div>
    <span>A</span><span>B</span><span>C</span>
</div>

닫는 괄호를 내려써줘도 된다.

<div>
    <span>A</span
    ><span>B</span
    ><span>C</span>
</div>

한줄에 작성해서 띄어쓰기를 없앤다.

inline 속성이라 한줄로 취급하면 된다.

 

방법 2) 참조 구문을 이어서 작성하기

<div>
    <span>A</span><!-- 
    --><span>B</span><!-- 
    --><span>C</span>
</div>

<!--  --> 참조 구문을 한줄 건너서 이어주는 형태이다

역시 inline의 성격을 이용한 트릭

방법 3) 마이너스 margin 이용

.info에 .helper 사이 띄어쓰기 크기만큼 margin-left 값을 마이너스로 설정한다.

띄어쓰기 크기는 부모의 font-size 를 따라간다.

margin-left : -7px ; (이 경우 부모의 글자크기)

html
<div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
</div>

CSS
span{
  background-color: gray;
  padding: 0px 20px;
  /* 이 경우 띄어쓰기는 5~7px 정도였습니다! */
  margin-left: -5px;
}