1

我的 html 中有这张表，在文本的上下两侧都有很多空白。我已经尝试过 css 和 html，但我无法自己修复它。知道如何删除空格吗？

屏幕截图（红色箭头表示我希望减少空间的位置）：

我的源代码

<!DOCTYPE HTML>
<html>
<head>
    <style>
        @font-face {
            font-family: 'gill-sans-light';
            src:url('gill-sans-std-light-59139f0a2c460.eot'); /* IE9 Compat Modes */
            src:url('gill-sans-std-light-59139f0a2c460.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('gill-sans-std-light-59139f0a2c460.woff2') format('woff2'), /* Super Modern Browsers */
                url('gill-sans-std-light-59139f0a2c460.woff') format('woff'), /* Pretty Modern Browsers */
                url('gill-sans-std-light-59139f0a2c460.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('gill-sans-std-light-59139f0a2c460.svg#gill-sans-light') format('svg'); /* Legacy iOS */
        }

        p {
            text-align: center;
            font-size: 120px;
            font-family: 'gill-sans-light';
        }

    </style>
</head>

<body>

    <table border="1px" align ="center" id="table" cellpadding="0">
        <tr>
            <td><p id="years"></p></td>
            <td><p id="months"></p></td>
            <td><p id="days"></p></td>
            <td><p id="hours"></p></td>
            <td><p id="minutes"></p></td>
            <td><p id="seconds"></p></td>
            <td><p id="milliseconds"></p></td>
        </tr>
        <tr>
            <td><p>y</p></td>
            <td><p>m</p></td>
            <td><p>d</p></td>
            <td><p>h</p></td>
            <td><p>m</p></td>
            <td><p>s</p></td>
            <td><p>ms</p></td>
        </tr>
    </table>    

    <p id="done_message"></p>

    <script>
        // Set the date we're counting down to
        var countDownDate = new Date("May 12, 2019 00:00:00").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            var milliseconds = distance%1000;
            var months = Math.floor(days/30);
            days = days - months*30;

            var years = Math.floor (months/12);
            months = months - years*12;

            if(years<10){
                document.getElementById("years").innerHTML = "0" + years + " . " ;
            } else {
                document.getElementById("years").innerHTML = years + " . " ;
            }

            if(months<10){
                document.getElementById("months").innerHTML = "0" + months + " . " ;
            } else {
                document.getElementById("months").innerHTML = months+ " . " ;
            }

            if(days<10){
                document.getElementById("days").innerHTML = "0" + days + " . " ;
            } else {
                document.getElementById("days").innerHTML = days + " . " ;
            }

            if(hours<10){
                document.getElementById("hours").innerHTML = "0" + hours + " . " ;
            } else {
                document.getElementById("hours").innerHTML = hours + " . " ;
            }

            if(minutes<10){
                document.getElementById("minutes").innerHTML = "0" + minutes + " . " ;
            } else {
                document.getElementById("minutes").innerHTML = minutes + " . " ;
            }

            if(seconds<10){
                document.getElementById("seconds").innerHTML = "0" + seconds + " . " ;
            } else {
                document.getElementById("seconds").innerHTML = seconds + " . " ;
            }

            if(milliseconds>=100){
                document.getElementById("milliseconds").innerHTML = milliseconds ;
            } else if(milliseconds<10){
                document.getElementById("milliseconds").innerHTML = "00" + milliseconds ;
                } else {
                document.getElementById("milliseconds").innerHTML = "0" + milliseconds ;
            }
            ;

            // If the count down is over, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("done_message").innerHTML = "EXPIRED";
                document.getElementById("years").innerHTML = "00.";
                document.getElementById("months").innerHTML = "00.";
                document.getElementById("days").innerHTML = "00.";
                document.getElementById("hours").innerHTML = "00.";
                document.getElementById("minutes").innerHTML = "00.";
                document.getElementById("seconds").innerHTML = "00.";
                document.getElementById("milliseconds").innerHTML = "000    ";
            }
        },1);
    </script>

</body>

4

2 回答 2

1

它与您的代码有关。例如，如果您使用标题 (h1, h2...)，那么您需要在这些元素中添加边距并将填充设置为零。如果你的 font-size 很高，也许 line-height 属性就是你要找的。将其设置为与您的字体大小相同。另外，您是否删除了表格单元格中的填充和表格的边框间距？如果没有，您必须声明如下：

table { 
    border-spacing: 0;
    border-collapse: separate;
}

table tr td {
    padding: 0;
}

我相信所有这些都会对你有所帮助，但有必要看看你的完整代码和 CSS。

编辑：

看完您的代码后，表格单元格中提到的空白是由您的段落引起的。每一个

元素具有默认边距和填充。为避免这种情况，只需添加以下代码即可删除 HTML 代码段落中的所有空格：

p {
    margin: 0;
    padding: 0;
}

下次，我建议使用 Chrome 浏览器的开发者控制台（单击 F12）。它向您显示您选择的每个元素的样式属性，并且比您测试您的代码要好得多。祝你好运。

于 2017-05-10T23:51:54.143 回答
0

您可以在 CSS 中设置行高：

tr{height: 20px;}
于 2017-05-10T23:51:56.617 回答