Float和margin CSS

Question

我已经创建了五个不同的图像部分，正如您在jsfiddle中看到的那样，问题是我无法控制这些图像部分的边距。问题是我试图在第1,2,3,4和5节之间添加一些空格，但每当我添加边距时，该部分就会拒绝移动。 我试图用代码重置浮动：

clear:both;

和

float: none;

但没有成功。这些代码的结果只是该部分跳转到一个新行。

小提琴：https://jsfiddle.net/p0eaxkpz/

Answer 1

我发现了您的问题，代码中存在错误：margin-left:0,5%;应为margin-left:0.5%;

这是您更新的jsfiddle

我只是将margin: 0; padding: 0;添加到所有元素中，您可以看到它运行良好。基本上，您无需使用<section>标记包装图像。

Answer 2

我也得到a more modular aproach

＆＃13;

＆＃13;

@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body
{
	background-color:black;
	width:100%;
	height:100%;
	padding-bottom:20%;
	
}

#wrapper

{
	width:80%;
	height:1000px;
	background-color:white;
	margin:auto;
	
	
	
	}

#headerloga
{
	float:left;
	width:20%;
	height:20%;
	font-family: "Gotham Medium";
	font-weight:800;
	font-size:40px;
	padding-top:10%;
	padding-left:10%;
	
	
	
	}
	
	#menu
	
	{
		float:left;
		width:60%;
		height:auto;
		font-family:"Gotham Medium";
		font-size:15px;
		padding-top:17.5%;
		padding-left:10%;
		

		}
		
		ul {
    float: left;
    width: auto;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: auto;
    text-decoration: none;
    color: black;
    padding: 0.2em 0.6em;
	
}

a:hover {
    color:#ED1C91;
}

li {
    display: inline;
}

#imageshosting	{
	background-color:#CCC;
	width:60%;
	height:80%;
	position:absolute;
	clear:both;
	top:40%;
	left:18%;
}

.img-hosted {
    display:block;
    position:relative;
    float:left;
    height:49%;
    margin:0.5%
}

.w33 {
    width:32.33%;
}
.w66 {
    width:65.66%;
}
.img-nextline {
    clear: both;
}


#foot	{
	background-color:#666;
	clear:both;
	position:absolute;
	top:120%;
	left:18%;
	width:60%;
	height:10%;
}

＆＃13;

<div id="wrapper"><!-- Webpage wrapper-->


<div id="headerloga">
Test
Test2
<section style="color:#ED178C; ">Test3 </section>
</div>
<div id="menu"><!--Menu-->
<ul>
  <li><a href="#">KUNDER</a></li>
  <li><a href="#">GAMLA FAVORITER</a></li>
  <li><a href="#">OM OSS</a></li>
  <li><a href="#">KONST</a></li>
  <li><a href="#">KONTAKT</a></li>

</ul>
</div><!-- End of menu-->

<!-- images starts-->
<div id="imageshosting">
<img class="img-hosted w33" src="images/testimage1.jpg"/>
<img class="img-hosted w33" src="images/testimage2.jpg"/>
<img class="img-hosted w33" src="images/testimage3.jpg"/>

<!-- New image line -->

<img class="img-hosted w66 img-nextline" src="images/testimage4.jpg"/>
<img class="img-hosted w33" src="images/testimage5.jpg"/>


</div><!--Imageshosting ends-->

<!--Footer here-->
<div id="foot">
<p>Hello</p>
</div>

</div><!-- End of webpage wrapper-->

＆＃13;

＆＃13;

＆＃13;