Как убрать пробел между h2 и абзацем

Я хочу удалить пустую строку между моими элементами h2 и p, которая находится в теге article (зачем использовать article? МОЙ инструктор попросил нас использовать 5 новых элементов html5 в нашем проекте.) Я попытался:

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

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

Это переместило мой h2 полностью вправо и в 2 строки., Затем я попробовал предложение стека / переполнения от Josmh, ответившего 13 октября 2011 года в 19:16:

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

    #prime h2,p {
        display: inline;
    }

Это переместило мою навигационную панель в ту же строку, что и h2, Welcome to Party by 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;
}
Источник

1 ответ

Разве поля не должны быть установлены наоборот? Я угадываю <p> ниже <h2>,

h2 {
     margin-BOTTOM: 0; 
}

p  {
     margin-TOP: 0;
}
Источник
Другие вопросы по тегам