2019-04-06 圆角与边距

倒角

圆角
     border-radius:;                 

边框方向

border-top-left-radius:px;           上左
border-top-right-radius:px;          上右
border-bottom-left-radius:px;        下左
border-bottom-right-radius:px;       下右
border-radius:0px 0px 0px 0px;       上右下左

外边距内边距

外边距

外边距:围绕在元素周围的空白区域默认不被其他元素占用的
作用:拉开元素之间的距离
语法:

        margin:值  5px   百分比 20%;
      取值:  
         px       像素
         %        百分比
         auto     (自动) 只在左右方向有效
         -5px;    负值

         margin:20px;                设置4个方向的外边距
         margin-top:5px;             设置的是上外边距
         margin-bottom:5px;          下外边距
         margin-left:                 左外边距
         margin-right:                右外边距


            margin:20px;                  设置4个方向的外边距
        margin:10px 20px;                 10px 代表上下   20px左右
        margin:10px 5px 20px;             10px代表上   5px左右 20px下方向
            margin:5px 10px 15px 20px;    上 右 下 左


        margin:0 2px 0 0px;            上右边距

内边距

内边距:内容与边框之间的距离

     语法:padding:
     取值:
          px;        像素
          %;          百分比
      padding:5px;                      四个方向的值
      padding:5px 10px;                 5px 上下 10px左右
      padding:5px 10px 15px;            上 左右  下
      padding:5px 10px 15px 20px;       上  右 下 左
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 边框 圆角 外边距内边距 外边距:围绕在元素周围的空白区域默认不被其他元素占用的作用:拉开元素之间的距离语法:ma...
    IT笔记阅读 414评论 0 1
  • 边框 圆角 外边距内边距 外边距:围绕在元素周围的空白区域默认不被其他元素占用的作用:拉开元素之间的距离语法:ma...
    sheng520阅读 171评论 0 0
  • 边框 圆角 外边距内边距 外边距:围绕在元素周围的空白区域默认不被其他元素占用的作用:拉开元素之间的距离语法:ma...
    725810阅读 173评论 0 0
  • 安且吉兮 为君晴好 十八年前,还是一个QQ盛行的年代,五一放假去杭州见了一...
    天才女巫阅读 529评论 0 2
  • 昨晚,确实睡晚了,11点入睡,今天早上也六点就起了,当时想着,如果睡着了,就再休息一会。 可是,我并没有。一直觉得...
    猛虎嗅蔷薇薇阅读 170评论 0 0

友情链接更多精彩内容