테스트 사이트 - 개발 중인 베타 버전입니다

css에서 이런 현상이 버그인지 아닌지 아시는분~

· 14년 전 · 1346 · 5
익스플로러도아니고 크롬에서...

 div에 border가 있고없고에 따라 위치가 달라져버리네요......

소스는 이러합니다.

<!doctype html>

<div style="position:relative; margin:0 auto; padding:0 190px 0 70px; width:490px; min-height:500px; _height:500px; font-size:9pt; border:0px solid red">
    
    <div style="position:relative; margin:130px 0 20px 0; min-height:100px; _height:100px; ">
    </div>
</div>

이러한 소스인데
빨간색표시한부분 border갑이 0이면 자식 div에 잇는 margin 값이 부모 div에도 적용되더라구요.
하지만 border:1px 을 주면 원하던대로됩니다..
 하아 짜증이 밀려오는군요..
버그 맞죠? 이런경우가 전에도 가끔 있었는데 그땐 그냥 넘어갈만한 상황들이었는데 
이번에는 이게 발목을 잡는상황이네요..
 일단은 1px 로 주고 #fff 줘서 없는 척 해줬지만 ㅡㅡ;; 해결책 아시는분 계신가요 ㅠ

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

포지션을 사용할땐 margin 보다는 left:0; right: 0; top: 0; bottom:0; 을 사용하는게 좋습니다
아 그렇군요..
근데 top 으로 위치값을 주니까
그 이후에오는 div 들은 자동적응로 그 높이에맞춰서 배치되지않네요...

마치 absolute 준것처럼 위엣놈을 덮어씌우고있네요;
이러면 더 불편하지않나요?
overflow:hidden;
버그 아닌듯 한데요.....
<div style="position:relative; margin:0 auto; padding:0 190px 0 70px; width:490px; min-height:500px; _height:500px; font-size:9pt; border:0px solid red">
<div style="float:left; width:490px;">
<div style="position:relative; margin:130px 0 20px 0; min-height:100px; _height:100px; "> 1 </div>
<div style="position:relative; margin:0 0 20px 0; min-height:100px; _height:100px; "> 2 </div>
<div style="position:relative; margin:0 0 20px 0; min-height:100px; _height:100px; "> 3 </div>
</div>

</div>

이런식으로 div 하나 더만들어서 묶어주니깐.. 원하는대로 되긴하는데.
하 정말 css 참 많이 안다생각했는데도 여전히 의문점투성이네요.

게시글 목록

번호 제목
1717635
1717629
1717626
1717625
1717621
1717619
1717611
1717610
1717609
1717607
1717601
1717598
1717591
1717590
1717583
1717575
1717572
1717568
1717566
1717549
1717545
1717533
1717512
1717511
1717508
1717495
1717479
1717473
1717470
1717463