CODEWITHSUNDEEP
htmlcss
Ramlal S
Ramlal S

Reputation: 1653

Size(height/width) is showing differently than given in CSS

I'm creating a sample tables,inputs and containers with (pure) HTML and CSS. The height is showing other than what i'm giving in the CSS. For example, Given height is 44px but in browser it is showing as 73px.

Why this is happening?

Is there any fault in my code?

Sample image

My sample code is given in code pen and below: https://codepen.io/ramlals/pen/vwEYbo

<!DOCTYPE html>
<html>

<head>
    <title>Table template</title>
    <style>
       .table-column {
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
        }

        .table-panel {
            background-color: rgba(0, 0, 0, .2);
            border: none;
            border-radius: 5px;
            margin-bottom: 15px;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
            color: #fff;
        }
        .table-panel-heading{
            padding: 14px 22px;
            height: 44px;
            border-bottom: 1px solid rgba(0,0,0,.12);
            box-shadow: 0 1px 0 0 rgba(255,255,255,.12);

        }
        .table-panel-title{
            font-weight: 400px;
            opacity: .9;
            text-transform: uppercase;
        }

    </style>
</head>

<body>
    <div class="table-container table-column">
        <div class="table-panel">
            <div class="table-panel-heading">
                <h3 class="table-panel-title">Status</h3>
            </div>
            <div class="table-panel-body">
                <table class="table-tag">
                    <tr>
                        <th>col-1</th>
                        <th>col-2</th>
                        <th>col-3</th>
                        <th>col-4</th>
                    </tr>

                    <tr>
                        <td>chrome1</td>
                        <td>chrome 2</td>
                        <td>chrome 3</td>
                        <td>chrome 4</td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 89

Answers (4)

Ramlal S
Ramlal S

Reputation: 1653

Someone posted the answer and removed, before I accept it.

This Works for my code:

Just adding the following in my CSS- 

* {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
       }

Upvotes: 1

OM PRAKASH
OM PRAKASH

Reputation: 393

I think either you have not given box-sizing or it's given as content-box so this is happening because of that. Change it to border-box.

For content-box height and width include padding and border as well. In your case it's height as 44px and padding-top and padding-bottom is 14px and a border-bottom of 1px is there. So, in total it's 44 + 14 + 14 + 1 = 73px.

Upvotes: 1

Michi
Michi

Reputation: 129

Add box-sizing: border-box;

 .table-panel-heading{
            padding: 14px 22px;
            height: 44px;
            border-bottom: 1px solid rgba(0,0,0,.12);
            box-shadow: 0 1px 0 0 rgba(255,255,255,.12);
            box-sizing: border-box;
        }

Upvotes: 3

DSCH
DSCH

Reputation: 2386

What you see is the "total" height. i.e. The height + top and bottom padding and the border-bottom. (44 + 28 + 1 = 73)

Upvotes: 4

Related Questions