CODEWITHSUNDEEP
htmlcssselectwidthmargin
qadenza
qadenza

Reputation: 9301

How to make elements the same margins and width?

<div id="divL">
<input name="email" type="text" placeholder="input text">
<div class="divInput">divInput</div>
<div class="divtxt">divtxt</div>
<input name="sname" type="text" placeholder="input text">
<select name="srodstvo">
    <option value="1">select</option>
    <option value="2">323</option>
</select>
<div class="divtxt">divtxt</div>

</div>

CSS 

*{
    margin:0;
    padding:0;
}
#divL{
    width:45%;
    margin:5vh 0 0 5vw;
    border:thin solid blue;
}
input[type="text"], .divtxt, .divInput, select{
    width:100%;
    margin:4px 0;
    padding:4px;
    border:thin solid #999;
    border-radius:3px;
}

All elements have the same margins, padding and width. But the distance between second end the third element is different and select is shorter !?

fiddle is here

Upvotes: 4

Views: 3438

Answers (3)

Sachin
Sachin

Reputation: 40990

It is due to Box-Sizing. Input has box-sizing is content-box whereas select is by default has border-box as box-sizing. So you can change the box-sizing property for the select by adding this to your markup

select
{
   box-sizing:content-box;
}

Without setting this property select has less height than the other elements (In Chrome).

One more thing is after setting this your elements are still outside the parent container. It is because you have put their width=100% along with padding : 4px which make them bigger than 100% of parent. So just set 0 padding from left and right.

Padding:4px 0;

And for the uneven margin in third element add

display:inline-block;

Update Js Fiddle

Upvotes: 1

David Starkey
David Starkey

Reputation: 1840

Try adding a second value to padding

padding:4px 0;

Fiddle

Tested in Firefox 23

Screenshot

UPDATE:

To fix the margin between elements 2 and 3, set all 4 sides in padding

margin:4px 0 0 0;

To keep the spacing at the bottom, set a padding in the outer div

padding:0 0 4px 0;

Updated fiddle

Upvotes: 1

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102468

To fix the width, add this CSS rule:

input, select
{
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

To fix the margins: add display: inline-block to...

input[type="text"], .divtxt, .divInput, select
{
    width:100%;
    margin:4px 0;
    padding:4px;
    border:thin solid #999;
    border-radius:3px;
    display: inline-block;
}

Here's it working: http://jsfiddle.net/leniel/Y5aVB/4/embedded/result/

Upvotes: 2

Related Questions