保證金無效

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：為投資組合標題及其內容創建一個單獨的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> 

我給h2portfolio課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

只需添加到您的類“ .h2portfolio ”中：

.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;
}