A, B 요소간 거리가 왜 150이 아닌 약 170 정도일까요?
본문
<style>
p {display:inline-block; border:1px solid; margin:0}
p.a {margin: 0 50px;}
p.b {margin: 0 100px;}
</style>
<p class="a">홈짱닷컴</p>
<p class="b">Homzzang.com</p>
https://codepen.io/sinbi/pen/MWpRZVx
150이 정상인데, 실체 측정해보니 170이네요.
오토셋에서 테스트해봐도, 150 넘더라구요. (약 156)
답변 6
근데 어디서 150이 넘는다는건가요?
툴로 찍어보니 150 되거든요?
오픈캡쳐1.3.3 툴 이용해보니 그렇더라구요.
서...서....설마, 캡쳐 툴이 이상한걸까요? ㅎ
어떤 툴 이용하면 저렇게 측정 가능하죠?
픽픽으로 재봐도 마찬가지네요.
아마도, 해상도 차이 같네요.
모니터 해상도를 변경하면서 재뫘더니, 해상도마다 제 각각이네요. ㅋ
inline-block으로 요소 정렬시 각각의 요소마다 크롬기준으로 4px의 거리가 벌어집니다.
각각 엔진마다 얼마나 벌어지고 안벌어지는지는 정확히 모르겠네요.
그리고 border의 경우도 따로 지정하지 않으면 border 굵기만큼 크기가 커집니다
flex나 float:left로 사용하여야 지정한 크기에 맞을것으로 보이네요.
float:left로 해봐도 150 훌쩍 넘네요. 166 정도 나오네요.
https://codepen.io/sinbi/pen/zYZXeqB
답변 감사합니다.
기본 p 태그 내에 padding 이라던가 margin 값이 있는지 채크해보세요.
동일 페이지에서 호출하였더라도 !important 가 우선 적용됩니다.
그리고 거리 계산은 마진포함인지도 채크해보시고
시작점을 a 객체가 아닌 window 로 계산했는지도 채크해보셔야 합니다.
https://codepen.io/sinbi/pen/zYZXeqB
초기화 후 테스트해봐도 마찬가지네요.
오토셋에서도 그런 걸로 봐서 브라우저 문제 같네요.
허이구.. 저는 계속 뭔이야기를 하시나 했습니다 ㅋㅋ
전 브라우저 플러그인은 사용안하고 픽픽 에디터를 사용합니다.
프라우저 상관없이 별도 독립 프로그램이라 메모리 적게 잡아먹고
컬러값 찍는거랑 부분캡쳐 하는거 좋더라구요.
소개 감사합니다. 당장 받아서 테스트해보도록 할게요. ㅎ
오오~ sinbi 님 안녕하세요?? :)
한 주의 시작은 잘 하셨는지요??
다른 분들께서 잘 설명해주셨지만, 제가 조금만 덧붙일게요~ ^^
inline, inline-block의 경우 폰트에 영향을 받는데요~
말씀하신 현상이 발생하시는 이유는 두 p태그 사이의 공백(\r\n) 때문이에요! ㅎㄷㄷ
Codepen에 올려주신 샘플을 픽픽으로 테스트해보니
크롬에서 100% 모드로 보면 157px이고, 110% 모드로 보면 174px이네요~! :)
참고로 파폭에서는 몇 px 정도 더 작게 나오는군요 ㅎㄷㄷ
이걸 아래와 같이 (1) p태그 사이의 공백을 없애거나,
(2) 공백을 주석 처리(!) 해버리면 크롬 100% 모드에서 정확히 150px로 딱 떨어지네요! ^-^
방법 1:
<p class="a">홈짱닷컴</p><p class="b">Homzzang.com</p>
방법 2:
<p class="a">홈짱닷컴</p><!--
--><p class="b">Homzzang.com</p>
이게 일종의 버그라고 생각되실 수도 있겠지만, 아마도 브라우저 개발자의 의도인 것 같네요 ^-^
그럼 sinbi 님께서도 편안한 저녁 되시고, 무더운 여름에 항상 건강하세요오~!
참고하실 만한 웹문서 :
+)
테스트해보니 볼피드 님과 애드프로 님께서 말씀하신 바와 같이 float: left로도 해결할 수 있네요! :)
p.a {margin: 0 50px; float: left}
아주 자세한 설명 감사합니다.
( ^ ________ ~ ) ===b
해당 객체에 float:left 속성 부여후 테스트 해보세요.
