html - 如何给内部div相等的边距?

标签 html css css-float

我们如何使内部 div 与外部 div 从所有四个边具有相等的边距?

这是我尝试过的:

<div class="outer">
<div class="inner">
    A
</div>
</div>

我的风格:

div
{
    overflow: hidden;
}

.outer{
    height: 100px;
    width: 100px;
    background-color: gainsboro;
}

.inner{
    background-color: wheat;
    margin: 5px;    
}

注意:我想用纯 CSS 实现这个 + 我不想做这样的事情:

.inner{
    height: 90px;
}

.inner{
    height: 90%;
}

最佳答案

给内部 div 顶部、底部、左侧和右侧。这将使它与外部之间的间距。

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <style type='text/css'>
            div { overflow:hidden; }
            div.outer {height:100px; width:100px; background-color:gainsboro; position:absolute} 
            div.outer >div {top:5px; left:5px; right:5px; bottom:5px; position:absolute; background-color: wheat;} 
        </style>
    </head>
    <body>
        <div class='outer'>
            <div></div>
        </div>
    </body>
</html>

关于html - 如何给内部div相等的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20628497/

相关文章:

javascript - 如何规避 float :left; behavior in a masonry layout

html - IE竖排文本问题

javascript - 当悬停另一个元素时影响一个元素

html - 带 CSS 网格的表格

java - 站点资源泄漏到 GetMapping 中的 UUID

css - 如何定位一个 div ,紧挨着另一个 div 并在 dom 中所有其他元素的顶部。 jsFiddle 提供

javascript - HTML 表单中的时间输入验证

css - 为什么 CSS box-shadow 会在不需要的位置产生阴影?

jquery - 选择多个在 jquery mobile 的 ListView 中不起作用

javascript - 对多个图像使用模糊图像加载