쓸모없는 공백 지우는 법

https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-inline-block-elements

How do I remove the space between inline/inline-block elements?

나만 같은걸로 고통받고 있는거 아니었어 휴^^,,

 

"사과랑 바나나는 맛있어" / "키위는 싫고 망고는 좋아"라는 문장에서 바나나와 망고만 노란색으로 표시를 하고, <br>을 사용하지 않고 문장을 띄워야 할 경우에 나는 이렇게 코드를 짰다.

<div>
 사과랑 
 <p class="yellow">바나나</p>
 는 맛있어
</div>
<div>
 키위는 싫고 
 <p class="yellow">망고</p>
 는 좋아
</div>

.yellow {
    color: yellow;
    backgrounnd: none;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

그런데 어랍쇼 도출되는 결과는?

(임의로 배경이랑 글자색을 바꿨음)

저 바나나랑 망고 뒤의 공백이 보이는가???? 저 필요없는 공백때문에 이것저것을 다 해보다가(ex. <mark>써보기,, <span>써보기..display 이것저것 다 넣어보기..) 나의 고민을 해결해줄 스택오버플로우를 발견했고 그게 바로 위의 링크였다. 

 

결론은 태그 사이에 공백을!!! 주지!!! 말!! 것!!!!!

<div>
 사과랑 <p class="yellow">바나나</p>는 맛있어
</div>
<div>
 키위는 싫고 <p class="yellow">망고</p>는 좋아
</div>

이렇게 태그를 붙여버린다면?

편-안

하지만 가독성이 조금... 떨어지는 것 같은 느낌이 든다 .. 가독성을 좋게 하는 방법은 좀 더 생각을 해 봐야할듯...?🤔👩‍💻