苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

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

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

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

查看: 256|回复: 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


提示:


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






 楼主| 发表于 2018-11-30 16:23:09 | 显示全部楼层
发表于 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 17:07:51 | 显示全部楼层
发表于 2018-12-1 10:38:07 | 显示全部楼层
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

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

GMT+8, 2019-2-19 04:26

© 2017-2018

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