Question

我正在进行这个简单的试验，但任何人都可以告诉我为什么从DIV边界到H2标头的距离如此之大？我怎样才能减少它？我不想要空间......

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

        <link rel="stylesheet" href="jquery-ui-1.8.custom/css/smoothness/jquery-ui-1.8.custom.css" type="text/css"> 
        <link rel="stylesheet" href="jquery-ui-1.8.custom/development-bundle/ui/jquery-ui-1.8.custom.css" type="text/css"> 

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

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

    function themify(){
     $("div").addClass("ui-widget ui-widget-content ui-corner-all");   
     $("input").addClass("ui-button ui-button-text");
     $(":header").addClass("ui-widget-header ui-corner-all");   //ui-widget 
    }
  </script>

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

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

    </head> 
    <body> 
        <h2>Tentativo widget con DIV</h2> 
   <form action="">
    <input type="button" value="Submit" id="pulsante" onclick="rendiVisibile()";><br/></br>
     <div id="test">
     <h2>CIAO</h2>
      Un saluto
     </div>
   </form>
 </body>
</html>

这里是CSS;没有填充

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 2px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

Answer 1

可能在你加载的一个CSS文件中设置了错误的填充（两次？有两个名为“jquery-ui-1.8.custom.css”的文件）。

很难说没有视觉效果，但这里有一种方法可以解决：使用Firefox的“Web Developer”工具栏，选择“Outline”选项菜单并选择“Outline Current Element”。将鼠标悬停在问题区域附近的元素上。当错误包含在红色框中时，请检查顶部的悬停栏以查看CSS选择器的名称。

在您自己的CSS文件或margin:0 0 0 0;元素中将该选择器本地设置为<style>，并且“层叠样式表”的“级联”部分将启动并解决您的问题。

Answer 2

作为默认样式表的一部分，内置边距与H2上的字体大小相同。

Here's a jsfiddle of your code和here's a jsfiddle of only your HTML, no CSS or JavaScript。请注意还有一个保证金？

要解决此问题，请设置特定的CSS规则，例如h2 { margin: 0; }，或者如果您想重新设置每个元素，请使用CSS重置。

当然很容易，但我不能... JQUERY UI - WIDGET - HEADER

这里是CSS;没有填充

2 个答案: