Reputation: 33

Table vertical padding reduction in html and css

I have this table in my html having a lot of blank space from both upper and lower sides of the text. I have tried css and html but I couldn't fix it myself. Any idea how to remove white space?

Screenshot (red arrows mean where I want the space to be reduced):

My Source code

<!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>

Upvotes: 3

Answers (2)

ES112

Reputation: 91

It's relative to your code. For example, if your using headlines (h1, h2...) than you'll need to add margin an padding set to zero in those elements. If your font-size is high, maybe the line-height property is what your looking for. Set it to the same as your font-size. Also, have you removed the padding in the table cells and the table's border spacing? If not, you must a declartion like follow:

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

table tr td {
    padding: 0;
}

I believe that all of those will help you, but it's necessary to give a look at yuor full code and CSS.

EDIT:

After watching your code, the mentioned gap in your table cells is cause by your paragraphes. Every

element has a default margin and padding. To avoid this in your case, just add the following code to remove all of the spaces in the paragraphes of your HTML code:

p {
    margin: 0;
    padding: 0;
}

For next time, I'd recommend using the Developer Console of the Chrome browser (Click F12). It shows you the style properties of each element you choose, and than you test your code much better. Good luck.

Upvotes: 1

Oleg Markoff

Reputation: 321

You can set a row height in your CSS:

tr{height: 20px;}

Upvotes: 0

Table vertical padding reduction in html and css

Answers (2)

Related Questions