views:

54

answers:

2

Hello all, Is it possible to avoid the spaces X & Y (see image)? There is no padding in CSS!

<html> 
    <head> 
        <title>Prova WIDGET</title> 

        <link rel="stylesheet" href="jquery-ui-1.8.1.custom/css/ui-lightness/jquery-ui-1.8.1.custom.css" type="text/css"> 

        <script src="jquery-ui-1.8.1.custom/development-bundle/jquery-1.4.2.js" type="text/javascript"></script> 
        <script src="jquery-ui-1.8.1.custom/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

        <script type="text/javascript">
                $(themify);

                function themify(){
                    $("#pulsante").addClass("ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"); //ui-button-text
                }
        </script>

        <style>#test{display:none}</style>

        <script type="text/javascript">
            function rendiVisibile(){
                if(document.getElementById("test").style.display = "none"){
                    $("#test").css({"width":"100px","float":"right","text-align":"center"}); 
                    $("#test").show("slide",{},1000);
                }
            }
        </script>

    </head> 
    <body> 
        <h2 class="ui-widget-header">Tentativo widget con DIV</h2> 
            <form action="">
                <input type="button" value="Submit" id="pulsante" onclick="rendiVisibile()";><br/></br>
                    <div id="test" class="ui-widget ui-widget-content ui-corner-all">
                    <h3 class="ui-widget-header ui-corner-all">CIAO</h3>
                        <p class="ui-widget-content ui-corner-all">Un saluto</p>
                    </div>
            </form>
    </body>
</html>
+1  A: 

Some HTML elements have default margins applied in most browsers. You can add some CSS to your page to set these to whatever values you like.

h1,h2,h3,h4,p,form { margin: 0; padding: 0; }

Some people like to include a reset css file, which resets all default margins, paddings, etc, to zero or common values so that you don't have browser-specific differences.

Mr. Shiny and New
THANX a LOT PERFECT !!!
alex
@alex, two things: please don't SHOUT, and if this is, indeed, 'perfect' it'd be polite/courteous to accept the answer (by clicking on the tick-mark to the left of the answer). =)
David Thomas
A: 

As scunliffe mentions, h3 elements have a margin value by default, and you need to override this with:

h3{ margin:0; }

There might be more going on, but it's difficult to say without seeing the css file you're linking to.

In fact, a lot of html elements have "helpful" styling by default. A lot of people use a reset stylesheet to remove all this default styling and ensure they have a clean slate to begin with. Check out these resources for more info:

http://developer.yahoo.com/yui/reset/
http://meyerweb.com/eric/tools/css/reset/
http://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet

MatW