我正在尝试以 ionic 方式移除这两个元素之间的空白区域。
这是 HTML:
<link rel="StyleSheet" type="text/css" href="./css/style.css" />
<ion-view name="tab-suppliers">
<ion-content>
<h2 class="no-padding bg-lightblue font-white tb-header"><center>TITLE!</center></h2>
<div class="row text-center bg-lightblue font-white test">
<div class="col col-25">
TEST
</div>
<div class="col col-25">
TEST
</div>
<div class="col col-25">
TEST
</div>
<div class="col col-25">
TEST
</div>
</div>
</ion-content>
</ion-view>
这是CSS:
.bg-lightblue {
background-color: #99CEFF;
}
.text-center {
text-align: center;
}
.font-white {
color: white;
}
.tb-header {
width: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.test {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.test 类不是应该删除元素之间的空白吗?如果没有,有人可以向我解释为什么吗?
正确的做法是什么?
提前致谢。
最佳答案
<h2>
元素有默认值 bottom-margin
这导致你的 <h2>
之间的空间和 <div>
.所以你必须删除这个 margin 。请参阅以下示例:
.bg-lightblue {
background-color: #99CEFF;
}
.text-center {
text-align: center;
}
.font-white {
color: white;
}
.tb-header {
width: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
h2 {
margin-bottom: 0px;
}
<ion-view name="tab-suppliers">
<ion-content>
<h2 class="no-padding bg-lightblue font-white tb-header"><center>TITLE!</center></h2>
<div class="row text-center bg-lightblue font-white test">
<div class="col col-25">
TEST
</div>
<div class="col col-25">
TEST
</div>
<div class="col col-25">
TEST
</div>
<div class="col col-25">
TEST
</div>
</div>
</ion-content>
</ion-view>
关于html - 删除 html/css 中元素之间的空格( ionic ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43613890/