패딩 문제가

Question

다음 마크 업 blueprintcss에 잘 보이는 :

<div class="container"> 
    <div class="span-12" style="background-color : cyan"> 
Hello 
    </div> 
    <div class="span-12 last" style="background-color : green"> 
Bye 
    </div> 
</div> 

당신은 절반 크기 소요 두 개의 열을 얻을, 그것은 산뜻 : 이제

Hello    Bye      

는 '안녕하세요'텍스트 컨테이너 div의 가장자리에 너무 가깝기 때문에 약간의 패딩을 추가하고 싶습니다. 분명히 제외

<div class="container"> 
    <div class="span-12" style="background-color : cyan; padding-left : 5px"> 
Hello 
    </div> 
    <div class="span-12 last" style="background-color : green"> 
Bye 
    </div> 
</div> 

작동하지 않으며, 당신이 "안녕"열 "하나 안녕을 아래로 끝날 :

Hello    
Bye 

이해가되지 않습니다 두 번째 컬럼의 크기를 감소 내가 원하는 정말 때문에 (이것은 마크 업 작업의 또 다른 레벨을 추가. 이제

"12 그리드 열 폭"이 될,하지만 필요가있다?

<div class="container"> 
    <div class="span-12" style="background-color : cyan"> 
    <div style="padding-left : 5px">Hello</div> 
    </div> 
    <div class="span-12 last" style="background-color : green"> 
Bye 
    </div> 
</div> 

내가 뭔가를 잃어버렸나요?

내가 여기에 누락 되었습니까?

Answer 1

나는 box-sizing: border-box을 사용하지 않는 것으로 의심됩니다. 이를 사용하는 경우 제안 된 솔루션이 작동해야합니다. 그렇지 않으면 추가 레벨의 마크 업이 필요합니다.

너비에 대한 기본값은 테두리가 아닌 내용에 적용되므로 청사진에서 너비를 제공하고 너가 패딩을 줄 때 패딩은 이 너비에 맞게이 추가 된 것을 기억하십시오. box-sizing: border-box 지시문은이를 수정합니다.

Answer 2

원하는 결과에 따라 에 border-left: 5px을 추가 할 수 있습니다. 단색 또는 rgba() 투명도의 단색을 사용하는 경우 나머지 레이아웃과 차이가 없어야합니다.

.container 
{ 
    /* cyan is the test color */ 
    background-color: cyan; 
    border-left: 5px; 
    border-color: cyan; 
    border-style: solid; 
} 

청사진 스마트 물건을 수행하고 더 나은 나의 제안보다 테스트 -이 작동하지 않는 경우에, 나는 최고의 크로스 브라우저 (오래된 IE) 결과에 대한 내부 요소를 사용합니다.

Answer 3

div에 div를 추가해야 문제가 발생하지 않습니다.

내가 코드에서

.padding { padding:1.5em; } 

그래서 내부 div의에게 클래스 패딩을 추가하는 표준에 따라,이 같을 것이다 :

<div class="container"> 
    <div class="span-12" style="background-color : cyan"> 
     <div class="padding"> 
      Hello 
     </div> 
    </div> 
    <div class="span-12 last" style="background-color : green"> 
     Bye 
    </div> 
</div>