안녕하세요.
참 이상한 현상이 나타납니다.
제가 div 박스를 가로 900 세로 200 으로 만들어서
그안에 안녕하세요 라는 글자를 넣었습니다.
이 글자를 중간으로 놓기 위해 패팅 top을 30주었습니다.
근데 익스에서는 괺찮은데
크롭이나 다른 브라우저에선 패티을 준만큼
박스의 가로 사이즈가 늘어납니다;
흠 이러면 박스안에서 패딩을 주면 준만큼 늘어나는건 왜 인가요?
박스안에 오브젝트 위치를 바꾸는 방법이 따로 있는 건가요?
참 이상한 현상이 나타납니다.
제가 div 박스를 가로 900 세로 200 으로 만들어서
그안에 안녕하세요 라는 글자를 넣었습니다.
이 글자를 중간으로 놓기 위해 패팅 top을 30주었습니다.
근데 익스에서는 괺찮은데
크롭이나 다른 브라우저에선 패티을 준만큼
박스의 가로 사이즈가 늘어납니다;
흠 이러면 박스안에서 패딩을 주면 준만큼 늘어나는건 왜 인가요?
박스안에 오브젝트 위치를 바꾸는 방법이 따로 있는 건가요?
2012.02.02 08:07:56 (*.8.73.101)
쭈니님과 김혜란님 안녕하세요. 여기서 자주뵙네요. ^^
김혜란님의 실력이 이젠 일취월장하네요.
김혜란님의 설명이 맞습니다.
패딩을 줄때는 패딩값 + width 공식이 적용되기 때문에 항상 염두를 해 주시고 설계를 해야 하는 것이 맞구요.
마진은 박스의 사이즈와는 상관 없습니다. 단 패딩의 경우 박스 내부에서 사이즈가 정해지는 것이기 때문에, 패딩값은 결과적으로 박스의 크기를 변화시키는 것입니다. 그래서 항상 박스의 크기를 설계할때 염두해 두셔야 합니다.
김혜란님의 설명 중 padding:0 20px 0 20px 이 부분은 padding:0 20px 이렇게 써도 됩니다.
이렇게 축약형을 써도 상 하 좌 우 값이 0 20 0 20 픽셀이 먹힙니다.
그리고 박스 내부에 글자를 중간에 넣고 싶을 경우 패딩을 주는 것 보단, text-align:center 이 속성을 주시는 것이 더 간단하죠 ^^ 답변 되셨나요?
또는 vertical-align:middle 속성도 있답니다. ^^
김혜란님의 실력이 이젠 일취월장하네요.
김혜란님의 설명이 맞습니다.
패딩을 줄때는 패딩값 + width 공식이 적용되기 때문에 항상 염두를 해 주시고 설계를 해야 하는 것이 맞구요.
마진은 박스의 사이즈와는 상관 없습니다. 단 패딩의 경우 박스 내부에서 사이즈가 정해지는 것이기 때문에, 패딩값은 결과적으로 박스의 크기를 변화시키는 것입니다. 그래서 항상 박스의 크기를 설계할때 염두해 두셔야 합니다.
김혜란님의 설명 중 padding:0 20px 0 20px 이 부분은 padding:0 20px 이렇게 써도 됩니다.
이렇게 축약형을 써도 상 하 좌 우 값이 0 20 0 20 픽셀이 먹힙니다.
그리고 박스 내부에 글자를 중간에 넣고 싶을 경우 패딩을 주는 것 보단, text-align:center 이 속성을 주시는 것이 더 간단하죠 ^^ 답변 되셨나요?
또는 vertical-align:middle 속성도 있답니다. ^^
width:800px 을 주고 padding:0 20px 0 20px(여기서0,20,0,20순서는 상,우,하,좌)을 주게되면
실제 그 레이아웃의 가로 사이즈는 width800과 매딩에서 왼쪽오른쪽에 20씩 준게 합쳐진 840으로 설정돼요.
저는 익스나 다른 브라우저에서도 다 이렇게 나오더라구요.
그러니까 결과적으로 가로 800 사이즈를 원하신다면 패딩값을 줄때 가로패딩값+ width= 원하는 가로길이. 가 되도록 원하는 가로길이에서 패딩값을 뺀 값을 width로 해주셔야해요.
<.div id="title">
<.h1>hello<./h1>
<./div>
라는 레이아웃에서 div 가로를 200px로 하고 h1에 왼쪽오른쪽 패딩을 30px주면 결과적으로 이 박스의 크기는 260px이 됩니다.
저도 마진과 패딩의 차이첨이 궁금해서 많이 찾아보고 했는데도 정확히 이해못하고, 그냥 사용했었는데 어느날 갑자기 이해가 되더라구요^^