css的padding,border,margin的意思
下面的内边距(padding)、边框(border) 、外边距(margin)的意思是我自己的理解。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: solid 30px; padding: 30px; width: 30px;height: 30px;margin: 30px">
o
</div>
</body>
</html>
边框模型如下:我用的是谷歌浏览器:右击-->检查就会出现下图:
从下图我们可以知道:内边距(padding)元素距padding框的距离,border是padding到border的距离。margin是border到margin的距离。

css的padding,border,margin的意思的更多相关文章
- CSS中padding和margin以及用法
CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- css中padding与margin
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- CSS中padding、margin、bordor属性详解
一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...
- CSS中padding、margin两个重要属性的详细介绍及举例说明
http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...
- CSS中 Padding和Margin两个属性的详细介绍和举例说明
代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- input元素的padding border margin的区别
padding内(不包含padding)的部分才是可输入部分,也是width和height标明的区域.padding的部分加上width和height部分是background的部分.padding的 ...
- CSS笔记——padding,margin为百分比计算时的参照对象
div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...
- CSS里padding和margin的区别是什么?
通俗地说——padding 就是内容与边框的距离:margin 就是边框与其他元素的距离.
随机推荐
- 洛谷U32670 小凯的数字(比赛)
题目网址 https://www.luogu.org/problemnew/show/U32670 题目背景 NOIP2018 原创模拟题T1 NOIP DAY1 T1 or DAY 2 T1 难度 ...
- JAVA判断时间是否在时间区间内
package com.liying.tiger.test; import java.text.ParseException; import java.text.SimpleDateFormat; i ...
- R语言学习笔记(九):fivenum()与quantile()
fivenum() fivenum(x, na.rm = TRUE) x 为数值型向量,可以包含NA以及Inf,-Inf na.rm = TRUE 默认将NA和NaN去除,但是Inf还保留. five ...
- xss挑战赛小记 0x03(xssgame)
0x00 继续做xss吧 这次是xssgame 地址 http://www.xssgame.com/ 一共八关 学到了很多东西 0x01 啥也没有 <svg/onload="alert ...
- MVC中路由的修改和浏览器的地址参数
在 ASP.NET MVC 应用程序中,它是更常见的做法在作为路由数据 (像我们一样与身份证上面) 比将它们作为查询字符串传递的参数中传递. ) { return HttpUtility.HtmlEn ...
- hdu1505City Game(动态规划)
City Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- Qt 实现脉搏检测-1-心跳曲线部分
最新的想法就是写一个显示脉搏的东西,主要就是通过串口读取硬件(检测心跳的)传来的数据,在显示一下. 先实现画心跳曲线 如下图 先来电干货, 首先,在这个代码中,第一次用到了list这个东东 所以,关于 ...
- 梳理 Opengl ES 3.0 (三)顶点坐标变换
先来个宏观上的理解: 其实这块逻辑是个标准流程,而且其他地方介绍的也很多了,这里简单提下. 坐标转换,其实是不同坐标系之间的变换,一个渲染顶点,要想让它呈现在屏幕上的某个位置,是需要让这个顶点经过一个 ...
- zabbix 语音告警
之前的文章中已经实现了zabbix 邮件告警和微信告警,生产环境上测试出消息抵达很及时,但是!万一服务器在大半夜突发故障微信.邮件这些通知都是废物了,大晚上还能听到微信通知吗?显然不可能(我的某朋友就 ...
- hibernate和mybatis的之CRUD封装差别
hibernate和mybatis的之CRUD封装差别 以下讲的是基于MVC三层架构. 由于设计架构的差别,hibernate在实际编程中可以把基础的CRUD封装,比如BaseDao类.其它类只要去继 ...