CODEWITHSUNDEEP
htmlcss
Maclean Pinto
Maclean Pinto

Reputation: 1135

Display: inline-block issues

i am using display:inner-block in my code. But inline-block automatically assigns padding between divs's which is causing browser incompatibility in my site. Can any one point out a solution.

Here a fiddle for basic reference.Here you can clearly see the padding assigned by inner block property

http://jsfiddle.net/damsarabi/vbhnF/#&togetherjs=4aiQ9gSCpq

This is the basic code for reference in fiddle

<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>


div{
 border:1px solid #000   
}

div.LabelColumn
{
    display: inline-block;
    vertical-align: top;
}

Regards,

Upvotes: 0

Views: 120

Answers (4)

Mr.G
Mr.G

Reputation: 3569

Try this:

<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>

div.LabelColumn
{
    font-size:16px;
    display: inline-block;
    vertical-align: top;
    text-align:left;
    border:1px solid #000;
}

.full_width {
   width:100%;
   font-size:0;
}

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

Also you can set font-size of container to 0 and set necessary font-size for floating elements. This will eliminate spaces. This is useful for cases when you can't avoid white-spaces between your elements (for example, some IDEs can be configured to automatically reformat markup).

div.LabelColumn
{
    font-size:16px;
    display: inline-block;
    vertical-align: top;
    text-align:left;
    border:1px solid #000;
}

.full_width {
   width:100%;
   font-size:0;
}

Demo: http://jsfiddle.net/keaukraine/htAR6/2/

Upvotes: 1

George
George

Reputation: 36794

inline-block doesn't automatically add margin, it is inline, which means it takes notice of your white space between each element. Even though this might look like a 4px or so margin, it's not, it's a single space. One way to get round it would be to remove the whitespace: 

<div class = "LabelColumn">asdfasdf</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div>

Another, to comment out the whitespace:

<div class = "LabelColumn">asdfasdf</div><!--
--><div class = "LabelColumn">asdfasdf</div>

JSFiddle

Or lastly, but by no means least, float:left instead of changing the display type:

JSFiddle

Upvotes: 2

jeremybarbet
jeremybarbet

Reputation: 912

By default, there is an extra margin-right of 4px (according to the font-size parent).

You can fix this issue with a css tweak. It's the solution I use more often, and it's easy way to adjust this alignment.

div.LabelColumn
{
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}

You can see more tweaks on this link : http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 2

Related Questions