CSS3中清除外边距、内边距margin,padding使用方法

建议给html页面创建样式时,首先添加如下CSS样式,将所有的元素内外间距都设为0:
{
    margin: 0px;
    padding: 0px;
}
因为如果我们不明确定义,由于不同浏览器处理策略不同,有的默认间距就设为0,而有的却有默认值。这样就会造成不同浏览器下显示的差异。

例子

去除html标签默认的外边距margin和内边距padding

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,<BR>legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,<BR>details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
 }

padding: 上、右、下、左; {从上按顺时针转的}







可用 padding-top、padding-bottom、padding-left、padding-right 分别表示:




如果 padding 属性缺失 right、bottom、left; 就都参考 top:




如果 padding 属性缺失 bottom、left; bottom 会参考 top, left 会参考 right:




如果 padding 属性缺失 left; left 会参考 right:




外边距 margin 和内边距 padding 道理是一样的:

 

时间: 2024-10-25 01:48:57

CSS3中清除外边距、内边距margin,padding使用方法的相关文章

css3中-webkit-animation-fill-mode属性值为both时的使用方法

大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试.搜索,个人认为差别在于: Out. I the computer. Then buy lexapro pill online it faint work BAM! I - in order viagra 25 mg look product low cost generic levi

CSS3 流式排版(使用em设置文字大小,以及外边距、内边距)

过去我们常用"硬编码"的字号(使用像素单位px)来设置文字的大小,但这种方式可能造成在大显示器上看着舒服的文字,到了移动设备的小屏幕上就会变得难以辨认. 1,使用em设置文字大小 百分比和em的结果相同,都是让文字相对于浏览器默认的文字大小缩放.比如:把文字大小设成110%或1.1em,结果就是比常规没有应用样式的文字大10%. 通常实现响应式布局的做法是:把页面的基准文字设置为100%,然后在其他元素中再用em单位放大或缩小文字. body{     font-size: 100%;

《响应式Web设计:HTML5和CSS3实践指南》——1.7节基于尺寸的响应式内边距

1.7 基于尺寸的响应式内边距为了衬托一个响应式宽度的图像元素,需要添加相对的内边距.如果使用静态的宽度内边距,图像内边距在较小的浏览器窗口中可能会显得过大,从而与其他附近元素相互挤压,甚至可能将图像挤出屏幕. 1.7.1 准备工作理解盒模型属性的计算是一个好的开始.一个对象所占的总宽度是它的实际宽度加上它两边的内边距,边框以及外边距,即 2 * (外边距+边框+内边距) + 内容的宽度 = 总宽度. 1.7.2 实现方式假设一张图像在正常的非响应式状态下的宽度为200px,典型的内边距可能是8

css的内边距和外边距的auto怎么使用

问题描述 css的内边距和外边距的auto怎么使用 如下代码为什么内边距没变啊?内边距都为0了? td.test1 {padding: 20px auto} 这个表格单元的每个边. 解决方案 http://www.w3school.com.cn/css/css_margin.asp

可以简易设置文字内边距的EdgeInsetsLabel

可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h // EdgeInsetsLabel // // Created by YouXianMing on 14/10/27. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @int

Word2007文档中怎么对称页边距双面打印

1.在word2007中我们先打开要处理的word文件,然后点击"Office按钮"-"打印"-"打印预览" 如下图所示: 文档中怎么对称页边距双面打印-对称页边距">2.进入页面的"打印预览" 中我们找到"页边距" 菜单列表中的"自定义边距" 如下图所示: 3.在弹出的"页面设置"窗口中将"页码范围"设置成"对称页边距&

Swift UILable 设置内边距实例代码_Swift

前言 对应一个曾经开发 Android 的人来说,没有这些基础属性简直令人发指,还是表喷这个,认真写代码 - - #  正文          代码实现: class UILabelPadding : UILabel { private var padding = UIEdgeInsetsZero @IBInspectable var paddingLeft: CGFloat { get { return padding.left } set { padding.left = newValue

【Swift】UILabel 设置内边距

class UILabelPadding : UILabel { private var padding = UIEdgeInsetsZero @IBInspectable var paddingLeft: CGFloat { get { return padding.left } set { padding.left = newValue } } @IBInspectable var paddingRight: CGFloat { get { return padding.right } se

解析CSS3中的Box-Sizing属性

在重构移动端页面的时候,我们经常会遇到两个框架并排的情况,并且需要宽度自适应.等宽,有边框这样的情况,我平时的方法就是用定位来处理,然后用负值定位来解决,但是后来发现可以用CSS3中的Box-Sizing属性来搞定.好吧,立马推荐出来给大伙. 语法: box-sizing: content-boxborder-boxinherit; 定义: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "