선 높이와 경계 너비 간의 상호 작용이 좋지 않아 수직 리듬이 깨져 버릴 수 있습니까?

Question

응답 형 사이트에서 기준/수직 리듬을 구현하려고합니다. 테이블 셀의 위쪽과 아래쪽 테두리가 문제를 일으키고 있습니다. 당신이 수직 그리드가 위에서 아래 위로 모두 열 라인의 텍스트에 존경 0 일/TD에 대한 경계를 설정하면

http://codepen.io/bakert/pen/akZWXE

: 여기 문제의 최소 버전이있다. 테두리를 0.0625em/1px/anything로 설정하고 테이블 아래로 스크롤하면 열의 크기가 너무 작아집니다. 표 자체의 텍스트도 더 이상 수직 그리드를 존중하지 않습니다.

문제는 줄 높이가 테두리 너비를 고려하지 않는다는 것입니다. 두 가지는 td의 높이를 결정하는 데있어 부가 적입니다. 이상적으로는 box-sizing: border-box과 같지만 line-height + border를 찾고 있습니다.

나는 th.bordered, td.bordered의 숫자를 좀 더 작게 line-height보다 p 작게 지정하여 해결할 수 있습니다. line-height 이외의 것을 사용하여 세로 리듬을 설정해야합니까? line-height과 여백을 조합 한 다음 테두리 너비만큼 여백을 줄입니까? 나는 그보다 더 간단한 무엇인가가 있기를 바라고 있습니다.

Answer 1

table { 
    width: 100%; 
    box-shadow: inset -1px -1px 0 0 #ccc; 
    } 
    td { 
    padding-right: 1em; 
    width: 50%; 
    box-shadow: inset 1px 1px 0 0 #ccc; 
    } 

편집 - 배경 색상에 대한 9 월 4 일
수정.
요소에 테두리를 사용할 수 있으며 여백은 1 픽셀 아래로 요소를 이동해야합니다. 그래서 테이블 위의 경계는 또 다른 선 높이 문제를 일으키지 않습니다. 그러나 이것은 요소에 사용할 수 없습니다.

table { 
    width: 100%; 
    margin-bottom: -1px; 
    border: 0 1px 1px 0; 
    border-style: solid; 
    border-color: #ccc; 
    }