如何缩进第一个和第三个<div>"margin-right"

.provide > .blok1:first-child, .provide > .blok1:nth-child(3) {
margin-right: 15px;
}

或

.provide > .blok1:nth-child(odd) {
margin-right: 15px;
}

您可以为现有类分配新的类名，并将 CSS 应用于这些类名。在这种情况下，我已经为现有的类blok1编写了一个类.myBlock。牢记这一点，我为您准备了一个具有所需输出的代码片段。

.myBlock{
margin-right:100px
}

<div class = "provide">
<div class = "blok1 myBlock">
<img class = "photo" src ="img/settings.jpg">
<h3>Management</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor</h4>
</div>
<div class = "blok1">
<img class = "photo" src ="img/pencil.jpg">
<h3>UI /UX Design</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
</div>
<div class = "blok1 myBlock">
<img class = "photo" src ="img/diamond.jpg">
<h3>Logo / Branding</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
</div>
<div class = "blok1">
<img class = "photo" src ="img/truck%202.jpg">
<h3>Animation</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet, consect netur.</h4>
</div>
</div>

确保将右边距的值更改为所需的值。我将其保留为 100px 以向您展示它是如何工作的。

This should work. 

.provide .blok1:first-child,
.provide .blok1:nth-child(3) {
margin-right: 36px;
}
.blok1 {
border: 1px solid red;
}

<div class = "provide">
<div class = "blok1">
<img class = "photo" src ="img/settings.jpg">
<h3>Management</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor</h4>
</div>
<div class = "blok1">
<img class = "photo" src ="img/pencil.jpg">
<h3>UI /UX Design</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
</div>
<div class = "blok1">
<img class = "photo" src ="img/diamond.jpg">
<h3>Logo / Branding</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet,</h4>
</div>
<div class = "blok1">
<img class = "photo" src ="img/truck%202.jpg">
<h3>Animation</h3>
<h4>Lorem ipsum dolor sitea amet, zixf conseit  adipi cing elit, seddi do eiusmod btdempor in didunt utlae ore etioe.Lorem ipsum new idolor sit amet, consect netur.</h4>
</div>
</div>