내 콘텐츠 주위에 알 수없는 흰색 테두리가 있습니다.

몇 가지 요소로 완전히 단순한 페이지를 만들었습니다. 내 '콘텐츠 div'주위에 흰색 테두리가 있고 그것을 일으키는 원인을 알아낼 수 없습니다. 내 콘텐츠의 상단 및 왼쪽에만 나타납니다. .body {border : 0; },하지만 그건 도움이되지 못했습니다. 내 CSS와 관련하여 몇 가지 다른 점도 있지만 해결했습니다. 여기내 콘텐츠 주위에 알 수없는 흰색 테두리가 있습니다.

.container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
    background-color: #6600cc; 
    padding: 20px 0px 0px 50px; 
    display: box; 
} 

.body { 
    margin: 0; 
} 

.mainText { 
    font-family: 'Open Sans', sans-serif; 
    font-size: 64px; 
    color: #FF0066; 
    font-weight: bolder; 
    line-height: 0%; 
    margin-bottom: 70px; 

} 

.secondColor { 
    color: #00ccff; 
} 

.stayTuned { 
    font-family: 'Open Sans', sans-serif; 
    font-size: 25px; 
    color: #ffffff; 
    font-weight: bolder; 
} 

.meanWhile { 
    font-family: 'Open Sans', sans-serif; 
    color: #ffffff; 
    font-weight: lighter; 
} 

a { 
    color: #ffffff; 
    text-decoration: none; 
}

JSFiddle https://jsfiddle.net/1yL1ta5x/하고 코드입니다 : : 또한

, 어떻게 조언을 부탁드립니다하는 최적화 여기

<!DOCTYPE html> 
<html lang='en'> 

<head> 
    <meta charset='UTF-8' /> 
    <title>Olivera Miletic graphic desig</title> 
    <link rel='stylesheet' href='style.css' /> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> 
</head> 

<body> 
    <div class="container"> 
     <div class="mainText"> 
      <p> OLI<span class="secondColor">APPARENTLY </p> 
      <p class="stayTuned"> SOON. STAY TUNED. </p> 
      </div> 
        <div> 
         <p class="meanWhile"> meanwhile <a href="http://www.oliveramiletic.com" target="_blank"> WORK </a>/<a href="https://www.behance.net/olivera_m" target="_blank"> BE </a>/<a href="https://twitter.com/oliapparently" target="_blank"> TW </a>/<a href="mailto:[email protected]" > MAIL </a> 
         </p> 
       </div> 
      </div> 
     </body> 
    </html>

내 CSS입니다 : 여기

내 HTML 코드입니다 적어도 웹 페이지의 모바일 및 데스크톱보기 및/또는 내 코드에 대한 다른 최적화를 환영합니다. 나는 절대적인 초보자이기 때문에 나와 함께 곰. 감사.

감사합니다,

출처

2017-03-07 limeThyme

흰색 테두리는 ''요소의 여백입니다. 0으로 설정하면 사라집니다. – j08691

본문의 여백. U '스타일을 설정합니다.body '클래스 본체가 아니고 – sTx

일부 브라우저/프레임 워크/환경 추가 기본 margin, padding 값 중 하나를 body 또는 html합니다.

공백을 없애려면 margins/padding을 html 또는 body으로 변경해야합니다.

은 그냥 다음을 추가 : 사업부가 100 %를 차지하기 때문에, 이런 스크롤이 container 사업부에 존재 이유에 대한 두 번째 질문에 대답하기 위해

html, body { 
    margin: 0; 
    padding: 0; 
}

편집

을 width 및 height 를 차지하고 있으며 20pxpadding-top 및 50pxpadding-left을 차지합니다.
따라서 container div는 부모를 오버플로하여 스크롤을 생성합니다.

일반적인 수정은 padding이 width 및 height에 포함되도록 container에 box-sizing: border-box을 적용하는 것입니다.

.container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: #6600cc; 
    padding: 20px 0px 0px 50px; 
    box-sizing: border-box; 
}

확인 업데이트 바이올린 : https://jsfiddle.net/1yL1ta5x/1/

난 당신이 box-sizing에 대한 자세한 내용을 제안하고, 전체 css box model 것이다.

출처

2017-03-07 18:06:46 nashcheez

대단히 감사합니다! if의 padding을 오버라이드하려고하지 않았고 마진 만 오버라이드하려고했습니다. – limeThyme

또한 두 번째 질문을하지 않는 경우. 나는 상하로 스크롤 할 수 있었고 왼쪽/오른쪽으로 스크롤 할 수있었습니다.이 크기와 너비를 내 콘텐츠 div (브라우저 크기가 선택되고 스크롤이 가능할 것이라고 가정) 내에서 너비와 높이를 100 %로 설정하여 해결할 것이라고 생각했습니다. 해결 방법이 있습니까? – limeThyme

당신의 대답이 내 문제를 해결했을뿐만 아니라 귀하의 링크를 통한 설명은 저에게 금이되었습니다! 다시 고마워요 @nashcheez – limeThyme

.body를 제거하고 본체로 교체하십시오. .body는 몸체라는 클래스에 적용됩니다. 태그는 몸체 일뿐입니다.

또는 body 태그에 class = "body"를 추가하십시오.

출처

2017-03-07 18:08:42

내 콘텐츠 주위에 알 수없는 흰색 테두리가 있습니다.

답변

관련 문제