2012-07-03 7 views
0

배경색이 흰색 인 내용 상자를 만들려고합니다. 두 이미지 인 머리글 div와 바닥 글 div에 있습니다. 두 개의 div와 정렬하여 공백없이 하나 또는 다른 하나의 공백을 넣을 수는 없습니다.공백없이 간단한 배경색 div

#content { 
    background-color:#ffffff; 
    width:1024px; 
    margin: 0 auto; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:12px; 
    padding: 0; 
    display: inline-block; 
} 

가 어떻게 컨텐츠 상자가 페이지의 나머지 부분과 일치하고 공백을하지받을 수 있나요 :

는 CSS입니까?

이것은 현재 모습이며, HELLO 상자와 그 위아래 이미지 사이의 공간을 제거하고 싶습니다.

This is what it looks like at the moment, I want to get rid of the space between the HELLO box and the images above and below it.

+2

아마도 http://jsfiddle.net/에 문제를 게시 할 수 있다면 더 쉽게 이해할 수 있을까요? 나는 잃어 버렸어 :) – avasin

+1

우리는 더 많은 코드가 필요하다. 적어도 이미지에 대한 CSS와 HTML도 좋을 것입니다. – dezman

+0

흠, 상단에 머리글을, 하단에 바닥 글을 넣고 중간에 내용을 넣으시겠습니까? 그리고 내용은 머리말의 바닥과 바닥 글의 상단에서해야합니다? 아니면 그런 식으로? – BjarkeCK

답변

1

그것은 좋은 해결책이 아니다, 그러나 주어진 정보로는 내가 가지고 올 수있는 유일한 사람입니다.

CSS

#content { 
    background-color:#ffffff; 
    width:1024px; 
    margin: 0 auto; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:12px; 
    padding: 0; 
    display: inline-block; 

    position:relative; 
} 

#topWhiteFix, #botWhiteFix { 
    position:absolute; 
    left:0px; 
    height:12px; 
    width:100%; 
    background:#FFFFFF; 
} 

#topWhiteFix { 
    top:-12px; 
} 

#botWhiteFix { 
    bottom:-12px; 
} 

HTML

<div id="content"> 
    <div id="topWhiteFix"></div> 
    <div id="botWhiteFix"></div> 

    HELLO 
</div> 

(테스트되지 않은)

2
그것은 나에게 깨끗한 솔루션으로하지 않는 것

하지만, 여기에 간다 :

#content { 
margin-top: -15px; margin-bottom: -15px; 
} 

실제로 -15px가 충분한 지 여부는 알 수 없으므로 직접 값을 입력해야합니다.