1
4つのボックスを作成しました。ボックスの1つをクリックしたり選択したりすると、他のボックスと重なる余分なパディングや余白が作成されます。私がやって試してみました擬似要素の問題でマージン/パディングのホバー
：
.marketing-service.active {
margin: 0;
}
と
.marketing-service.active:hover {
margin: 0;
}
すべてのボックスを元の場所に維持するにはどうすればよいですか？下矢印が原因で余分なスペースが削除されていますか？
$('#marketing-tab1').addClass('active');
\t $('#marketing1').show();
$('.marketing-service').click(function() {
\t \t $('.marketing-service.active').removeClass('active');
\t \t $(this).toggleClass('active');
\t \t
\t \t //To get the service display box to show
\t \t var item_number = $(this).attr('id').replace('marketing-tab', '');
\t \t /* $('html, body').animate({
\t \t scrollTop: $("#service-display-box").offset().top
\t }, 1500);*/
\t \t $('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
\t });#marketing-services {
width: 80%;
margin: 0 10%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 2%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
.marketing-service-title {
font-size: 1.6em;
margin-bottom: 100px;
}
.marketing-img {
width: 125px;
height: 125px;
}
/*-- Down Arrow for boxes --*/
.marketing-service.active,
#marketing-tab1.active {
background: rgba(0, 255, 170, .4);
}
.marketing-service.active:after,
.marketing-service.active:before,
#marketing-tab1.active:after,
#marketing-tab1.active:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service.active:after,
#marketing-tab1.active:after {
border-width: 0px;
margin-left: 0px;
border-color: rgba(0, 255, 170, .4);
border-right-color: rgba(0, 255, 170, .4);
margin-top: -30px;
}
.marketing-service.active:before,
#marketing-tab1.active:before {
border-color: #FFF;
border-top-color: rgba(0, 255, 170, .4);
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">A</h2>
<img src="../images/marketing-seo.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">B</h2>
<img src="../images/marketing-ppc.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">C</h2>
<img src="../images/marketing-conversion.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">D</h2>
<img src="../images/marketing-email.png" class="marketing-img">
</div>
</div>
</div>
ので、あなたは、矢印の周りの空白を削除したいが、矢印が表示されるようにしたいですか？ – ab29007
@kittyCatはい、正確です。 – Paul