html 间隔区,HTML和float的间距问题

第一次张贴在这里。我一直在刷新我的HTML和CSS，我遇到了一些小问题。

如果你看看这个链接，你会发现粉色的“我的游戏生活”和梅花色的“我缺乏宗教信仰”之间有一些不必要的间隔。这两个段落的id为right，我将它们设置为float:right as so；

#right {float:right;}

我对左边的元素做了同样的处理，就像这样：#left {float:left;}

我将在下面列出完整的代码列表和网站图片：

CSS：

p {

font-size: 2em;

font-family: "Poiret One", cursive;

color: #D6EBFF;

}

ul {

border:0.2em solid #1f2f31;

border-radius: 10px;

background-color: rgba(123, 321, 78, .2);

padding-right: 5ps;

}

li {

font-size: 2em;

font-family: "Poiret One", cursive;

color: #D6EBFF;

}

h1, h2, h3, h4, h5, h6 {

font-size: 2em;

font-family: "Poiret One", cursive;

color: #D6EBFF;

}

#span1 {

text-decoration: underline;

}

#hello {

margin-top: 1em;

font-size: 3em;

}

#wonder {

font-family: "Poiret One", cursive;

font-weight: bold;

font-size: 2.5em;

}

#mystery {

font-size: 2em;

font-family: "Dancing Script", cursive;

padding-bottom: 5px;

margin-bottom: 15px;

}

.intro {

background-color: rgba(240,230,140, 0.8);

}

.intro p {

color: #000029;

}

#img1 {

width: 75px;

height: 75px;

margin-right: 2px;

margin-bottom: 5px;

}

.img_header {

/*float: left;*/

border: 2px solid #1f2f31;

border-radius: 10px;

background-color: rgba(255,69,0,0.3);

width: 24%;

}

.img_header_container h3 {

padding: 15px;

margin-top: -15px;

margin-bottom: -2px;

}

.picture {

margin-left: 5px;

margin-bottom: 5px;

}

.center {

display: table;

margin: auto;

}

.main_container {

border:0.2em solid #1f2f31;

border-radius: 10px;

background-color: rgba(157, 139, 178, .5);

}

.main_container p {

padding-left: 10px;

}

.list {

width: 24%;

/*float: left;*/

}

.img_header {

width: 24%;

}

.main_content {

/*float:right;*/

width: 73%;

border:0.2em solid #1f2f31;

border-radius: 10px;

margin-right: 10px;

margin-top:17px;

background-color: rgba(205, 120, 200, .5);

margin-bottom: 5em;

}

.main_content_container {

text-align: center;

padding-bottom: 10px;

}

.main_content_container p {

font-size: 1.5em;

line-height: 170%;

text-align: left;

padding-left: 10px;

}

.main_content_container a {

font-size: 2em;

color: #D6EBFF;

}

.religion {

/*float:right;*/

width: 73%;

border:0.2em solid #1f2f31;

border-radius: 10px;

margin-right: 10px;

margin-top:17px;

background-color: rgba(103, 0, 124, .5);

margin-bottom: 5em;

}

.religion_container {

text-align: center;

padding-bottom: 10px;

}

.religion_container {

font-size: 1.5em;

line-height: 170%;

text-align: left;

padding-left: 10px;

}

.religion_container a {

font-size: 2em;

color: #D6EBFF;

}

#left {

float: left;

}

#right {

float: right;

}

body {

background-image: url("http://orig01.deviantart.net/064f/f/2010/064/6/1/arcane_symbols_by_stinkmeaner.jpg");

background-color: black;

font-size: 100%;

}

HTML：

Content

Content

Content

Content

• MenuItem
• MenuItem
• MenuItem

title

Some content

Read more!

Title

Title

Some content

Read more!

你有什么线索吗？

最佳答案：

Id必须唯一。不能有多个“right”div。如果相同的样式应该应用于多个元素，那么它应该是一个类。对于idimg1

是无用的，因为没有显示标记。

你用了margin-bottom: 5em来代替(？)margin-bottom: 5px的

http://jsfiddle.net/29tz5efb/