A, B 요소간 거리가 왜 150이 아닌 약 170 정도일까요? 채택완료

오오~ sinbi 님 안녕하세요?? :)

한 주의 시작은 잘 하셨는지요?? 

다른 분들께서 잘 설명해주셨지만, 제가 조금만 덧붙일게요~ ^^

inline, inline-block의 경우 폰트에 영향을 받는데요~

말씀하신 현상이 발생하시는 이유는 두 p태그 사이의 공백(\r\n) 때문이에요! ㅎㄷㄷ

Codepen에 올려주신 샘플을 픽픽으로 테스트해보니

크롬에서 100% 모드로 보면 157px이고, 110% 모드로 보면 174px이네요~! :)

참고로 파폭에서는 몇 px 정도 더 작게 나오는군요 ㅎㄷㄷ

이걸 아래와 같이 (1) p태그 사이의 공백을 없애거나,

(2) 공백을 주석 처리(!) 해버리면 크롬 100% 모드에서 정확히 150px로 딱 떨어지네요! ^-^

방법 1:

</p>

<p><p class="a">홈짱닷컴</p><p class="b">Homzzang.com</p></p>

<p>

방법 2:

 </p>

<p><p class="a">홈짱닷컴</p><!--</p>

<p>--><p class="b">Homzzang.com</p></p>

<p>

이게 일종의 버그라고 생각되실 수도 있겠지만, 아마도 브라우저 개발자의 의도인 것 같네요 ^-^

그럼 sinbi 님께서도 편안한 저녁 되시고, 무더운 여름에 항상 건강하세요오~!

참고하실 만한 웹문서 : 

https://norux.me/63

+)

테스트해보니 볼피드 님과 애드프로 님께서 말씀하신 바와 같이 float: left로도 해결할 수 있네요! :)

</p>

<p>p.a {margin: 0 50px; float: left}</p>

<p>

허이구.. 저는 계속 뭔이야기를 하시나 했습니다 ㅋㅋ

전 브라우저 플러그인은 사용안하고 픽픽 에디터를 사용합니다.

프라우저 상관없이 별도 독립 프로그램이라 메모리 적게 잡아먹고

컬러값 찍는거랑 부분캡쳐 하는거 좋더라구요.

해당 객체에 float:left 속성 부여후 테스트 해보세요.

inline-block으로 요소 정렬시 각각의 요소마다 크롬기준으로 4px의 거리가 벌어집니다.

각각 엔진마다 얼마나 벌어지고 안벌어지는지는 정확히 모르겠네요.

그리고 border의 경우도 따로 지정하지 않으면 border 굵기만큼 크기가 커집니다

flex나 float:left로 사용하여야 지정한 크기에 맞을것으로 보이네요.

기본 p 태그 내에 padding 이라던가 margin 값이 있는지 채크해보세요.

동일 페이지에서 호출하였더라도 !important 가 우선 적용됩니다.

그리고 거리 계산은 마진포함인지도 채크해보시고

시작점을 a 객체가 아닌 window 로 계산했는지도 채크해보셔야 합니다.