您的位置:首页 > Web前端 > CSS

CSS--盒子模型(border margin padding)

2018-08-24 14:40 501 查看

padding:填充  是内容到边的距离  

border:边框  是边的粗细

margin:边界  是控件到控件的距离

注意:都可以控制4个方向(上,右,下,左)

  • 1个值:(上右下左)
  • 2个值:(上下,左右)
  • 3个值:(上,左右,下)
  • 4个值:(上,右,下,左)

<style> 
.a
{
    border:2px solid green;
    padding:10px 50px; 
    margin-bottom:13px;
    background:yellow;
    width:300px;
    border-radius:25px;
}
.b{
    border:2px solid #a1a1a1;
    padding:10px 50px; 
    background:#dddddd;
    width:300px;
    border-radius:25px;
    }
</style>

js:

<div class="a">border-radius 属性允许您为元素添加圆角边框! </div>
    
<div class="b">border-radius 属性允许您为元素添加圆角边框! </div>

效果图:

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: