CODEWITHSUNDEEP
htmlcss
SwiftedMind
SwiftedMind

Reputation: 4307

css input padding is not the same as span-padding

I have this code:

echo "<table class='tpT'>";

foreach ($blueprints as $key => $blueprint) {
    echo "<tr><td><span class='neutral'>Slot</span></td><td><input type='text' class='tpI' size='1'><span class='slotTypeOne'>{$blueprint['slot']}</span></td></tr>";
}

echo "</table>";

in the blueprints-array are two elements. Just two names, that I want to display

But the two rows doesn't look alike. They are slightly different.

example

You see, in the first row, the input-field is slightly higher than the red span-element. But in the second row, they fit perfectly next to each other. I don't know why. I mean, the two rows should look the same. I think so, at least.

Here is my CSS:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 100%; 
            font-family: Arial;
}

body {
    background: rgba(41, 128, 185,1.0);
    background-attachment: fixed;
}




input.tpI {

    background: rgba(236, 240, 241,.8);
    border: none;
    color: #333;
    width: auto;
    max-width: 100%;
    padding: 5px;

}

table.tpT {
    width: 100%;
    background: rgba(50, 50, 50, .6);
    border-top: 2px solid rgba(50, 50, 50, .2);
    border-bottom: 2px solid rgba(50, 50, 50, .2);
    color: #ddd;
    padding: 5px;
}


.tpT td {
    padding: 4px;

}


span.slotTypeOne {
    background: #d35400;
    color: #fff;
    padding: 5px 7px 5.1px 7px;
}

span.neutral {
    color: #333;
    background: rgba(250, 250, 250, 1);
    padding: 5px;
    width: auto;
    border: none;
}

I looks different in every browser. But none of them looks perfect. I have no clue why. Because padding is 5px. For both.

Any ideas?

Edit:

jsfiddle: jsfiddle.net/4wA7r/1

Upvotes: 0

Views: 368

Answers (1)

enguerranws
enguerranws

Reputation: 8233

I'm not sure, but I guess this comes from the line-height. Your input and your span don't have the same line-height by default. So you have to set it to be the same.

span.slotTypeOne { 

  background: #d35400;
    color: #fff;
    padding: 5px 7px 5px 7px;
    line-height: 20px;
    display: block;
    float: left;

}
input.tpI {

    background: rgba(236, 240, 241,.8);
    border: none;
    color: #333;
    width: auto;
    max-width: 100%;
    padding: 5px;
    line-height: 20px;
    display: block;
    float: left;
}

As you can see, I had to set those elements to display: block, as they couldn't stay inline element (or we couldn't adjust the "inner line-height").

This works here : http://jsfiddle.net/4wA7r/4/

Upvotes: 2

Related Questions