div paddin 적용시 width값
유메
style type=text/css
#box1 { width:200px; height:100px; background:#693; }
#box1 #box { display:block; width:100px; height:100px; background:#999; }
#box2 { width:180px; height:100px; padding-left:20px; background:#693; }
#box2 #box { display:block; width:100px; height:100px; background:#999; }
#box3 { width:200px; height:100px; padding-left:20px; background:#693; }
#box3 #box { display:block; width:100px; height:100px; background:#999; }
/style
div id=box1div id=boxpadding 값이 없이 width를 200 줌 /div/div
div id=box2div id=boxpadding 값을 줘서 width 를 180으로 함/div/div
div id=box3div id=boxpadding 값을 줘서 width 를 180으로 함/div/div
질문을 위해 위에 적어놓았습니다.
위처럼 padding값을 줄경우 그 만큼 width 값을 빼주잖아요 아니면
box3처럼 padding값만큼 div가 늘어나는게 맞죠 ??
그래서 box2번처럼 코딩을 했거든요.
그런데 개발자 피씨에선 20px만큼 짤려서 백그라운드 이미지가 안보네요....그래서 그냥 box3번처럼 해놨습니다.
저와 개발자 모두 익스플로8버전이구요.
무엇때문인가요? 알려주세요 ~
-
딥와인
ie는 패딩값만큼 width값이 늘어나지만, 파이어폭스는 그렇지 않습니다.
지금 주신 소스만으로는 어떤게 문제인지 저는 알수가 없네요.
번외로 불필요한 속성을 뽑자면,
각 요소에 display:block속성과 #box1 #box2 #box3 에 height값은 없어도 되겠습니다.
그리고 ID의 경우 중복으로 사용하지 않습니다 class로 변경해 주세요. -
칸나
네 ^^ 답변모두 감사합니다 ~~
-
곰탱이
DTD가 정확하게 어떻게 들어가는지 확인하셔야할듯하네요. 한문구만 틀려도 쿽스모드로~
-
클라우드
음 그러면 혹시나 팍이어폭스를 감안한다면 box3번처럼 width 값을 줘야겠네요..
-
하예라
DTD를 개발자가 맘대로 빼버렸을수있음
쿽스모드시
width안에 padding border같이 들어감 -
패틱
이런경우 #box3에 padding-left를 주는것 보다,
#box에 margin-left를 주는것이 좋지 않나 싶네요!
그리고, id=\box\보단 class=\box\가 맞는것 같습니다. id는 한번만 나와야하니까요. -
해가빛
dtd의 유,무 (표준모드 / 쿽스모드)에 따라서 박스모델 계산 값이 달라집니다. ie에서만요..
-
은G
확인해 봤는데 dtd 소스 넣었답니다 ㅡㅡ; 혹시 다른이유는 없을까요?
-
궁수자리
ie8 사용하시면, 개발된 페이지에서 f12눌러보세요.
개발자도구의 마지막 메뉴에 문서모드가 있습니다.
DTD가 제대로 적용되었다면, \ ie8(혹은 7) 표준 \ 이라고 나오겠지요.
DTD를 넣었지만, 올바르지 않은 형식일 경우 \ 쿼크모드 \로 렌더링 될수도 있습니다.
질문하시는 증상자체가 쿽스 모드에서 나타나는 현상이기에 드리는 말씀입니다. -
무들
아 위엔 예제로 그냥 만든거라서 id값이구요 소스내에선 class로 되어 있습니다.
근데 id 나 class 부분 둘다 이런문제가 생깁니다.
백그라운드 깔고 원하는 위치에 텍스트를 넣다보니까 padding값을 줄수밖에 없네요..