zoukankan      html  css  js  c++  java
  • HTML中的padding和margin

    padding

    (内边距)

    语法:

    (1)padding-left:10px; 左内边距

    (2)padding-right:10px; 右内边距

    (3)padding-top:10px; 上内边距

    (4)padding-bottom:10px; 下内边距

    (5)padding:10px; 四边统一内边距

    (6)padding:10px 20px; 上下、左右内边距

    (7)padding:10px 20px 30px; 上、左右、下内边距

    (8)padding:10px 20px 30px 40px; 上、右、下、左内边距

    作用描述:
    • 是指该元素边框线以内的距离,设定之后,该元素内部的非漂浮或定位元素都会距离该元素的边框距离该设定的值的长度;
    • 当设定该值后,如果设定的值和元素内部已有元素的高度或宽度超出本身的长时,会自动将长度变长以适应内容,所以此时应当在样式中加入box-sizing:border-box;属性,将边框长宽固定为边框所定值;
    • 不可以设置负值,不报错,但没有效果;

    margin

    (内边距)

    语法:

    (1)margin-left:10px; 左外边距

    (2)margin-right:10px; 右外边距

    (3)margin-top:10px; 上外边距

    (4)margin-bottom:10px; 下外边距

    (5)margin:10px; 四边统一外边距

    (6)margin:10px 20px; 上下、左右外边距

    (7)margin:10px 20px 30px; 上、左右、下外边距

    (8)margin:10px 20px 30px 40px; 上、右、下、左外边距

    作用描述:
    • 是指该元素边框线以外的距离,设定之后,该元素的外边距离所设置方向的元素会相应增加或减少;
    • 可以设置负值,会向相反方向移动;

    margin是盒模型的外边距,padding是盒模型的内边距;

    用margin时,最好给父级元素加上overflow:hidden;(溢出隐藏)

    用padding时,最好给自身加上box-sizing:border-box;(固定边框)

  • 相关阅读:
    MongoDB配置客户端
    fatal: refusing to merge unrelated histories
    Connection reset by [server_ip] port 22 (hexo d 部署博客出错)
    hexo d 部署博客时出错
    git reset --hard xxxxxxx
    查看MySQL版本的命令及常用命令
    log4j 知识点
    ssh 登录报错 packet_write_wait: Connection to x.x.x.x port 22: Broken pipe
    Windows&Word 常用快捷键
    Apache所有开源项目文件
  • 原文地址:https://www.cnblogs.com/wykid/p/8191025.html
Copyright © 2011-2022 走看看