padding右边距失效问题,出现滚动条时,右边并没有出现留白
需求:如下图。一个父容器,里面有一个子容器,想实现子容器和父容器之间保留20px距离。错误方法一:自然情况下,我们会给父容器加一个padding:20px; 但是并不能实现需求,右边并不出现空白.father {height: 200px;width: 200px;border: 1px solid #000;...
·
需求:如下图。一个父容器,里面有一个子容器,想实现子容器和父容器之间保留20px距离。
错误方法一:自然情况下,我们会给父容器加一个padding:20px; 但是并不能实现需求,右边并不出现空白
.father {
height: 200px;
width: 200px;
border: 1px solid #000;
overflow: auto;
padding: 20px;
}
.son {
border: 1px solid #000;
height: 100px;
width: 300px;
background: red;
}
正确方法一:在子容器外面再套一层
<div class="father">
<div style="width: 300px; padding: 20px;">
<div class="son"></div>
</div>
</div>
正确方法二:把子元素设置为display:inline-block
.father {
height: 200px;
width: 200px;
border: 1px solid #000;
overflow: auto;
padding: 20px;
}
.son {
border: 1px solid #000;
height: 100px;
width: 300px;
background: red;
display: inline-block;
}
更多推荐
已为社区贡献1条内容
所有评论(0)