苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

分布式系统框架(V1.3) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper万能框架(V2.3) HttpHelper官方出品,无敌框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V1.9) 最牛的爬虫类,没有爬不到只有想不到 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 124|回复: 9

[HTML/HTML5] 【零基础学习web前端】CSS中margin和padding的区别

[复制链接]
  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

    发表于 2018-11-30 16:18:30 | 显示全部楼层 |阅读模式
    本帖最后由 Amy 于 2018-11-30 16:20 编辑

    【零基础学习web前端】CSS中margin和padding的区别

    【零基础学习web前端】教程目录导航 http://www.sufeinet.com/thread-24027-1-1.html



    padding是控件的内容相对控件的边缘的边距,即内边框;margin是控件边缘相对父空间的边距,即外边框。
    设置margin 那么他所占据的空白地方会是在边框外面
    设置padding 他所占据的空白地方是在边框里面。
    例:
    HTML
    [HTML] 纯文本查看 复制代码
    <html>
    <div class="box">
        <div class="main"></div>
    </div>     
    <html>

    css样式
    [CSS] 纯文本查看 复制代码
    html{
                background: #bce4ff
            }
            .box{
                width: 200px;
                height: 200px;
                background: #4777de;
                padding:50px;
                margin: 50px;
            }
            .main{
                width: 100%;
                height: 100%;
                background: #fff;
            }

    效果:
    TIM截图20181130154637.png
    图解看一下就更清楚了:

    1.jpg


    提示:


    • 内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
    • 外边距可以是负值,而且在很多情况下都要使用负值的外边距。






  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-30 16:23:09 | 显示全部楼层
  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

    发表于 2018-11-30 16:28:54 | 显示全部楼层
  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

    发表于 2018-11-30 16:29:12 | 显示全部楼层
  • TA的每日心情
    奋斗
    昨天 09:37
  • 签到天数: 21 天

    [LV.4]偶尔看看III

    发表于 2018-11-30 16:39:07 | 显示全部楼层
    很不错的,我会一直关注的,问下,我现在也想学习这块,该准备些什么呢?
  • TA的每日心情
    奋斗
    昨天 09:37
  • 签到天数: 21 天

    [LV.4]偶尔看看III

    发表于 2018-11-30 16:39:23 | 显示全部楼层
  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-30 16:41:57 | 显示全部楼层
    竹林风 发表于 2018-11-30 16:39
    很不错的,我会一直关注的,问下,我现在也想学习这块,该准备些什么呢?

    可以参考我的这篇文章,然后跟我的文章学,从基础开始,很容易的http://www.sufeinet.com/thread-24004-1-1.html
  • TA的每日心情
    开心
    昨天 09:03
  • 签到天数: 17 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-30 16:42:47 | 显示全部楼层
  • TA的每日心情
    慵懒
    昨天 08:50
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    发表于 2018-11-30 17:07:51 | 显示全部楼层
  • TA的每日心情
    开心
    昨天 12:22
  • 签到天数: 20 天

    [LV.4]偶尔看看III

    发表于 2018-12-1 10:38:07 | 显示全部楼层
    您需要登录后才可以回帖 登录 | 马上注册

    本版积分规则

    QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备17001017号-1 )

    GMT+8, 2018-12-13 00:08

    © 2017-2018

    快速回复 返回顶部 返回列表