Question

我想让h2类的上边距比现在更大。我尝试应用margin-top和padding，但它们都不起作用。当我在h2portfolio类上使用margin-top时，第1部分的margin-top（这是一个完全不同的部分）会发生变化。

你可以在interlaser.webovo.nl上看到这个。我需要更改橙色'Portfolio'h2的边距，所以类“h2portfolio”。

用于构建该部分的html：

<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>

我使用的css：

.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
}

#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}

.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}

Answer 1

我在答案中做了更新。

1：为 lazershow 内容制作单独的div 2：为投资组合标题＆amp;创建一个单独的div其内容然后根据您的需要提供保证金 投资组合 div，以满足您的要求。

.lazershow{
  background:white;
  height:200px;
}

.portfolio_div{
  border:thin black solid;
}
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top:10%; /*Give margin as per your need*/
}

#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}

.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}

<div class="lazershow">
LazerShow Div
</div>
<div class="portfolio_div">
  <h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
</div>

我已将margin-top提供给h2portfolio课程。

这是JSFiddle

希望这有帮助。

Answer 2

只需在margin-top: 100px;课程中添加padding-bottom:15px;和.h2portfolio样式即可。

.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top: 100px;
padding-bottom:15px;
}

#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}

.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}

<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>

Answer 3

只需添加到您的班级＆＃34; .h2portfolio＆＃34;：

.h2portfolio {
  background-color: white;
  text-align: center;
  color: #F16C20;
  margin-top: 100px;
  padding-bottom:15px;
  //line new added
  float: left;
  width: 100%;
  margin-top: 100px;
}

保证金顶部无效

3 个答案: