檬味博客 » 问答 » CSS中margin和padding的区别

CSS中margin和padding的区别

margin是指的外边距属性,padding是指的内边距。这是盒子模型的概念。1、盒子模型示意图如下：2、代码示例说明如下：div{border: 1px solid red;float: left;margin: auto 20px;width: 100px;height: 100px;}a{background:pink; padding-left:60px;}1111122222结果如下：...
CSS中margin和padding的区别
根据谷歌权威解释：Padding goes around all four sides of the content and you can target and change the padding for each side with CSS. Margin is the space between the border and next element. The space outside the border between it and the other elements is the margin.
翻译：Padding是在内容四周（上下左右）的空间，你可以给每一边的padding大小设置一个具体的值。 Margin是在边框和下一个元素之间的空间。

Source: http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding
2016-05-11
区别如下：
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

基本说明：
1、不翻译margin和padding是由于在汉语中并没有与之相对应的词语； 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念；
2、如果有一点Html基础的话，就应该了解一些基本元素，如p、h1~h6、br、div、li、ul、img等。如果将这些元素细分，又可以分别为顶级元素、块级元素和内联元素。块级元素是构成一个html的主要和关键元素，而任意一个块级元素均可以用Box model来解释说明。
2018-04-17
margin是指的外边距属性,padding是指的内边距。这是盒子模型的概念。
1、盒子模型示意图如下：

2、代码示例说明如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{border: 1px solid red;float: left;margin: auto 20px;width: 100px;height: 100px;}a{background:pink; padding-left:60px;}</style></head><body><div><a>11111</a></div><div>22222</div></body></html>结果如下：

2016-05-12
mengvlog 阅读 10 次 更新于 2025-07-21 05:24:48 我来答关注问题0
3 个回答檬味博客专题活动
  • 懂视生活 css网页的几种布局实例

    margin-left: 100px; } } 左边固定宽度,右边自适应 实现过程中需要注意的是: 1. left需要脱离文档流,而right只需要正常显示就可以。2.left只是覆盖在right上边,因此想要让right内容完整显示需要给right paddi...

  • 猪八戒网 【HTML】div、p等标签里的文字内容太长,让其显示省略,鼠标滑入再悬浮完整内容。

    css核心代码overflow:hidden;text-overflow:ellipsis;display:-webkit-box;/*-webkit-line-clamp:1;*//*能够显示的行数，超出部分用...表示*/-webkit-box-orient:vertical;js代码//获取点击参数的方法，替换对应的文本，添加样式;functionhideContent(e){//获取对应的id节点varnode=document.getElementB...

  • 书香学编程 如何理解CSS的display属性

    如果我们经常会制作导航栏，这时就要使用ul li 和a组合的方式，但是是行内元素，我们无法设置它的宽和高，这时，就可以在的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。display为CSS中比较常用的属性，他有很多的属性...

  • 文暄生活科普 怎么在html中修改页面的title标签?

    P{dading:30px0} 3.对外边距margin的设置 我们都会margin应该不是很陌生，其实只要我们设置margin的上下左右边距和对象之间的距离，就可以实现上下段落之间的距离。语法如下：p{margin:30px0} 在文章段落中，分段一般都是p标签，想实现段落之间的距离，我们一般使用maring和dadding这两种方式，可以轻松实...

  • a3476012 下拉菜单,点开这个上一个就折叠了

    { padding:0;margin:0;box-sizing: border-box;} .foldMenu-box{ width: 200px;} .foldMenu{ min-height: 500px;background-color: #333;color: #fff;} .foldMenu li{ } .foldMenu-title{ padding: 8px 20px;font-weight: bold;font-size: 14px;background...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部