1.padding和margin,几种参数

  这篇会很短。

  

  那么如上图所示,margin指的是外边距,padding指的是内边距,border自有其像素宽度,element在1335乘以392的地方。

  margin和padding一样总共有四个,上右下左——top right bottom left。你可以选择margin-top这样一个个的去设置,也可以margin:10px 0 0 0;这样。

  那么以margin为例,padding类似,后面可以跟的参数有三种形式。

  1.margin: 3px 5px;——两个参,分别表示上下和左右,即上下外边距均为3px,左右外边距均为5px。

  2.margin: 10px 15px 5px;——三个参,分别表示上、左右和下,即上外边距10px,左右外边距均为15px,下外边距为5px。

  3.margin: 10px 7px 5px 8px;——四个参,分别表示上、右、下、左,即上外边距10px,右外边距7px,下外边距5px,左外边距8px。

  padding是一样的写法和含义。

  以上。

时间: 2024-10-13 22:45:38

1.padding和margin,几种参数的相关文章

border,padding,margin盒模型理解

安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border,padding,margin盒模型理解</title> <style&

10-[CSS]-盒模型:border,padding,margin

1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示: <!-- 盒模型: 在网页中 基本上都会显示一些方方正正的盒子,这种盒子就被我们称为盒模型 重要的属性: width,height,padding,border, margin width: 指的是内容的宽度,而不是整个盒子真实的

padding 和 margin 不为人知的一面 ---(深度整理)

一说起盒模型,大家都会说,content+padding+margin+border. 恩,就这么几个,概念网站都写得清清楚楚了,但是你对他们的理解又有多少? 经常遇到“这里怎么回事?”“明明写了怎么会不起作用?”一找就是半天╮(╯▽╰)╭(我也发生过).归根结底还是对本质不够理解. 这里我就查找了许多资料,整理了一下,现在让我们来挖挖padding和margin的坟吧 ! 在了解padding和margin之前 ,我们先要知道什么是块元素,什么是内联元素(行内元素).一个表格搞定.   块级元

内联元素的padding和margin

首先区分一下3类元素: 1)块级元素:div.p等这一类具有宽高属性,且单独占一行的元素: 2)占位元素:img.input这一类具有宽高属性.紧随上一个元素不单独占一行的元素: 3)内联元素:span.strong这一类不具有宽高属性,且紧随上一个元素不单独占一行的元素. 本文主要讨论内联元素的padding.margin属性的存在与否和表现形式. 直接看代码: <div id="wrap"> <span>啊啊啊啊啊啊</span> <spa

android中padding和margin的理解

在android安排控件布局时,padding和margin经常被用到. 其具体解释可以通过一张图展现,如下, 两个属性表示的意义与web编程相同. 深入理解: padding约束的是控件或布局显示的内容距离边框的距离,沿垂直边框向内压缩,padding越大,内容显示控件越小: margin这是沿垂直边框向外延伸的距离, 它的意思就是给控件加了一个一定距离的空白边,显示效果只与值大小正负相关,与其他元素边界无关. 值得注意的是,padding值的范围[0,任意正数](默认为0),而margin的

固本培元之三:Convert、运算符、流程控制语句、ref/out/in三种参数类型

一.Convert类常用的类型转换方法Convert.ToInt32() 转换为整型(int)Convert.ToChar() 转换为字符型(char)Convert.ToString() 转换为字符串型(string)Convert.ToDateTime() 转换为日期型(datetime)Convert.ToDouble() 转换为双精度浮点型(double)Conert.ToSingle() 转换为单精度浮点型(float) 二.运算符算术运算符 + - * / %逻辑运算符 & | ^

以指针和引用两种参数实现删除单链表L中所有值为X的结点的函数

下面是单链表的数据结构 typedef struct LNode{ ElemType data; struct LNode *next; }LNode,*Linklist; 1.以指针参数实现 void delete_x_1(LNode *head,ElemType x){//head为单链表头结点,删除结点的值为x LNode *l = head; LNode *p = head->next; while(p != null){ if(p->data == x){ l->next =

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

为什么padding和margin在span中不好用

为什么padding和margin在span中不好用:可能标题的问题并不被所有人认同,有的可能觉得padding和margin是好用的,而有的却认为是不好用的.下面通过实例分别介绍一下两个属性在span中到底好不好用.一.padding属性: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

关于padding与margin的区别

代码一:全为padding. <!doctype html><html><head>    <meta charset="UTF-8">    <title>margin||padding</title>    <style type="text/css">#div1{    width: 800px;    background-color: red;    padding: 20