http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

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

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 4327|回复: 9

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

[复制链接]
发表于 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


提示:


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








1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-11-30 16:23:09 | 显示全部楼层
padding和margin的属性用法可以参看我的这篇文章
http://www.sufeinet.com/thread-24062-1-1.html
发表于 2018-11-30 16:28:54 | 显示全部楼层
真是难得给力的帖子啊。
发表于 2018-11-30 16:29:12 | 显示全部楼层
楼主加油, 帖子不错, 是一系列的, 学习喽
发表于 2018-11-30 16:39:07 | 显示全部楼层
很不错的,我会一直关注的,问下,我现在也想学习这块,该准备些什么呢?
发表于 2018-11-30 16:39:23 | 显示全部楼层
楼主加油,我们都看好你哦。
 楼主| 发表于 2018-11-30 16:41:57 | 显示全部楼层
竹林风 发表于 2018-11-30 16:39
很不错的,我会一直关注的,问下,我现在也想学习这块,该准备些什么呢?

可以参考我的这篇文章,然后跟我的文章学,从基础开始,很容易的http://www.sufeinet.com/thread-24004-1-1.html
 楼主| 发表于 2018-11-30 16:42:47 | 显示全部楼层
竹林风 发表于 2018-11-30 16:39
楼主加油,我们都看好你哦。

谢谢支持
发表于 2018-11-30 17:07:51 | 显示全部楼层
我只是路过打酱油的。
发表于 2018-12-1 10:38:07 | 显示全部楼层
无回帖,不论坛,这才是人道。
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

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

GMT+8, 2024-11-8 15:35

© 2014-2021

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