Question

我想删除文章标签中h2和p元素之间的空白行（为什么要使用文章？我的教师要求我们在项目中使用5个新的html5元素。）我试过了：

#prime h2 {
     margin-top:0em; 
}

#prime p  {
         margin-bottom:0em;
}

这将我的h2一直向右移动到2行。。然后我尝试了Josmh在10月13日和11日19:16回答的堆栈/溢出建议：

 #prime h2,p{
        padding: 0;
        margin: 0;
    }

    #prime h2,p {
        display: inline;
    }

这会将我的导航栏移动到与h2相同的行，欢迎来到Carol的派对。

代码无效，因为我正在使用文章？我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Parties by Carol</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
  <header id="hdr">
    <h3>throw a ball</h3>
    <h2>throw a line</h2>
    <h1>Throw a Party!</h1>
    <div id="party"><img src="images/balloons2.jpg" width="125" height="125" alt="A Party"/></div>
    <p>Parties by Carol</p>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="Final-1.html">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Types of       Parties</a>
        <ul>
          <li><a href="#">Quinceneras/Sweet 16</a></li>
          <li><a href="#">Bar/Bat Mitzvahs</a></li>
          <li><a href="#">Tots and Toddlers</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </header>
  <article id="prime"><h2>Welcome to Parties by Carol</h2>
    <p>
      For your next celebration, contact Parties by Carol. Whether your event is for two or two hundred, Parties by Carol can and will accommodate your needs. We specialize in fulfilling your every wish, whether at our facility or a location of your choice. We have a wide and varied menu that can be customized for your special event. Parties by Carol offers a combination of skills to help create unique and memorable occasions for you and your guests. So relax and leave everything to Parties by Carol. We aim to please and we will.</p>
  </article>
  <aside id="sbar1">
    <p>Beautiful Venue</p>
    <p>Devine Food</p>
    <p>Great Music</p>
    <p>Fun People</p>
    <p>&nbsp;</p>
  </aside>
  <footer>&copy;Copyright - 2014 CAS</footer>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>



#prime h2 {
     margin-top:0; 
}

#prime p  {
         margin-bottom:0;
}

#prime h2, p  {
    display: inline;
}

Answer 1

不应该设置相反的边距吗？我猜测<p>低于<h2>。

h2 {
     margin-BOTTOM: 0; 
}

p  {
     margin-TOP: 0;
}

如何删除h2和段落之间的空格

1 个答案: