CODEWITHSUNDEEP
htmlcss-positioncss
Brainarts
Brainarts

Reputation: 91

Why is there a gap between my div's and button's

There is a few days that I play around with positioning and sizing using CSS and I am stuck with a gap between div's element and buttons element.

Illustration of the gap problem The main holding div has a green background and the contained div's holder have a pink background.

So you can see there is a gap between the div's acting as label and textbox holder, and also between button placed inside the div acting as the button's holder

I also tried to include a css reset without success and I also tried to put a global selector to reset padding margin and border

* {
      padding:0; 
      margin : 0
      border-width: 0;
  }

I really wonder how to eliminate those gap to gain full control of the occupied space by my holder. In all case here is my very simple code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .interactput {
            background-color: green;
        }

        .interactput div {
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-color: lightpink;
        }

        .interactput div button {
            background-color: lightgoldenrodyellow;
        }
    </style>

</head>
    <body>
        <div id="AddessEditor" class="interactput">
            <div>
                <label>This is a label inside a div</label>
            </div>
            <div>
                <input type="text" value="This is input type=text inside a div"/>
            </div>
            <div>
                <button>We are</button>
                <button>Three buttons</button>
                <button>Inside a div</button>
            </div>

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

Upvotes: 0

Views: 3507

Answers (3)

Brainarts
Brainarts

Reputation: 91

Finally if found the exact reason about it here fighting the space between inline block elements.

As you can have read in the suggested article on css trick, element with inline-block display mode have a space between them because there is a space or line feed between them, witch is convert to a text node by the browser. The suggested solution are, for myself, definitely not solution that are easily understandable and/or maintainable.

So, after few hours of google search, question of formulating the question correctly :S i found that those text-node can be eliminate easily with JQuery. The answer was here on stackoverflow at Solution to remove text node. So let take my submitted sample of code and let's had a specific class for my control container, which I named "control-container".

    <div id="AddessEditor" class="interactput">
        <div class="control-container">
            <label>This is a label inside a div</label>
        </div>
        <div class="control-container">
            <input type="text" value="This is input type=text inside a div"/>
        </div>
        <div class="control-container">
            <button>We are</button>
            <button>Three buttons</button>
            <button>Inside a div</button>
        </div>
    </div>

After this all I had to do is to filter out text-node from those container and remove them like this in the document ready function...

$(document).ready( function() {
    $('.interactput').contents().filter(function () { return this.nodeType === 3; }).remove();
    $('.control-container').contents().filter(function () { return this.nodeType === 3; }).remove();                
});

Magic! This is perfect for my need since i'm creating a widget. Hope it will help others here

Upvotes: 5

akshaymanerikar
akshaymanerikar

Reputation: 27

IS this how you want...just see this edited fiddle....

<div id="AddessEditor" class="interactput">
        <div>

http://jsfiddle.net/Qgr77/

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

* {
    padding: 0;
    margin : 0
}
.interactput {
    background-color: green;
    overflow:hidden;
   }

.interactput div {
    float:left;
    overflow: hidden;
    vertical-align: middle;
    background-color: lightpink;
        border: none;
}
.interactput div button {
    background-color: lightgoldenrodyellow;
    border: none;
}
.interactput div input {
    border: none;
}

Upvotes: 0

Related Questions