`
yacole
  • 浏览: 238295 次
  • 性别: Icon_minigender_1
  • 来自: 浙江科技学院
社区版块
存档分类
最新评论

CSS初级教程(五)- Margin和Padding

CSS 
阅读更多

marginpadding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

例子,h2:

css 代码
  1. h2 {   
  2.  font-size: 1.5em;   
  3.  background-color#ccc;   
  4.  margin: 1em;   
  5.  padding: 3em;   
  6. }   

元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left

Box Model

请看盒模型问题

分享到:
评论

相关推荐

    CSS入门教程:计算CSS盒模型宽和高

    120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margin-left margin-right width,但是浏览器对于CSS盒模型的解释却并非如此,所以

    CSS快速入门关键字整理文档

    盒模型(Box Model):CSS布局的基础,每个HTML元素都可以看作是由内容、内边距(padding)、边框(border)和外边距(margin)组成的矩形盒子。 流(Flow):在CSS中,元素可以处于不同的布局流中,如普通流、浮动...

    福优林@Qt5小白变大牛初级篇word---第10章.pdf

    空白(margin)、边框(border)、填充(padding)和内容(content)。 对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言,这四个矩形是完全重合的。 空白区域位于边框外,并且总是透明的。 边框为...

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    精通CSS+DIV网页样式与布局视频教材

    13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.1.1 XML的特点 ...

    CSS网站布局实录 (第二版)PDF版

    6.5.2 margin与padding边距缩写 6.5.3 border边框缩写 6.5.4 list列表缩写 6.5.5 background背景缩写 6.5.6 color颜色缩写 6.6 CSS代码优化 6.6.1 增加代码重用率 6.6.2 使用样式覆盖进行简化 6.7 园角样式设计 ...

    初写静态网页

    html+css 入门 /*main*/ .main { width: 100%; height: auto; margin: 0; padding: 0; float: left; } /*专家团队*/ .showtTitle { width: 455px; height: 70px; padding: 0; margin: 0 auto; } ....

    CSS Float(浮动)

    .imgbox { float:left; text-align:center; width:120px; height:120px; border:1px solid gray;...margin:4px;...margin-bottom:8px;...CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会

    基础jquery

    jquery基础知识:通过jquery对象进行css样式的设置,dom对象方法的控制,文档中有源码,希望对初级的jquery同学有用

    CSS3 2D 转换

    CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-right:50px; border-radius:5px; border:1...

    CSS 表单

    CSS 表单 一个表单案例,我们使用 CSS 来渲染 HTML 的表单元素: CSS 实例 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border...

    CSS3 3D 转换

    padding:10px; float:left; margin-right:50px; border-radius:5px; border:1px solid #000000; background:red; margin:10px; } CSS3 3D 转换 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。 在本章中,您...

    CSS Display(显示) 与 Visibility(可见性)

    .imgbox { float:left; text-align:center; width:120px;...CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。 Box 1 Box

    cssprettifier-userscript:格式和语法突出显示您打开CSS文件

    cssprettifier-userscript 格式和语法突出显示您打开CSS文件。 用户就像跨浏览器的扩展一样,可以对特定网页进行即时更改,通常是更改其外观或添加或修改功能。入门在Chrome,Firefox (需要 ) ,Safari (需要 ) ...

    网页布局入门教程 如何用CSS进行网页布局

    表现标准语言(CSS); 行为标准语言(DOM和ECMAScript)。  倡导结构,样式,行为分离。 CSS中的定位机制: 1、标准文档流(Normal flow):从上到下,从左到右,输出文档内容,由块级元素(从左到右撑满页面,...

    CSS 分页实例

    CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li {...

    详解Vue demo实现商品列表的展示

    Vue实现商品列表的展示是一个比较简单的入门demo,下面是具体的实现: 简单CSS样式: <style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-...

    CSS 盒子模型

    CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际...

Global site tag (gtag.js) - Google Analytics