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

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

QA

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이 넘는다는건가요?

3034868304_1624259174.8925.png

툴로 찍어보니 150 되거든요?

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

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

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

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

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

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

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

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

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

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

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

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

오오~ 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 님께서도 편안한 저녁 되시고, 무더운 여름에 항상 건강하세요오~!

 

 

참고하실 만한 웹문서 : 

https://norux.me/63

 

 

+)

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

 


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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,128 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT