`
tangzongyun
  • 浏览: 180772 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

css padding和margin常用的用法

    博客分类:
  • CSS
阅读更多

一、padding

1、语法结构

(1)padding-left:10px; 左内边距

(2)padding-right:10px; 右内边距

(3)padding-top:10px; 上内边距

(4)padding-bottom:10px; 下内边距

(5)padding:10px; 四边统一内边距

(6)padding:10px 20px; 上下、左右内边距

(7)padding:10px 20px 30px; 上、左右、下内边距

(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

2、可能取的值

(1)length  规定具体单位记的内边距长度

(2)%       基于父元素的宽度的内边距的长度

(3)auto    浏览器计算内边距

(4)inherit 规定应该从父元素继承内边距

3、浏览器兼容问题

(1)所有浏览器都支持padding属性

(2)任何版本IE都不支持属性值“inherit”

二、margin

1、语法结构

(1)margin-left:10px; 左外边距

(2)margin-right:10px; 右外边距

(3)margin-top:10px; 上外边距

(4)margin-bottom:10px; 下外边距

(5)margin:10px; 四边统一外边距

(6)margin:10px 20px; 上下、左右外边距

(7)margin:10px 20px 30px; 上、左右、下外边距

(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

2、可能取的值

(1)length  规定具体单位记的外边距长度

(2)%       基于父元素的宽度的外边距的长度

(3)auto    浏览器计算外边距

(4)inherit 规定应该从父元素继承外边距

 

3、浏览器兼容问题

(1)所有浏览器都支持margin属性

(2)任何版本IE都不支持属性值“inherit”

分享到:
评论

相关推荐

    Css padding和margin区别

    这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...

    css中padding、margin两个重要属性的详细介绍及举例说明

    本文将详细介绍这两个属性的功能、使用方法以及一些进阶技巧,帮助读者更深入地理解和掌握它们。 #### 二、基础知识 在正式介绍`padding`与`margin`之前,我们需要先了解一些基础概念: 1. **盒子模型(Box Model)...

    HTML中padding和margin的区别,代码加详解

    HTML 中的 padding 和 margin 是两个常用的 CSS 属性,它们都是用于控制 HTML 元素的布局和样式的,但它们之间存在着明显的区别。 首先,让我们来了解一下 padding 属性。padding 属性用于设置 HTML 元素的内边距,...

    CSS的margin和padding

    **CSS的margin和padding详解** **Margin是什么** 在CSS中,`margin`是一个非常重要的属性,它用于定义元素周围的空间,即元素与元素之间或元素与容器边界的距离。`margin`是透明的,不会影响元素本身的颜色或背景...

    CSS中margin和padding的区别浅析

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。下面讲解 padding和margin常用的用法

    css中padding和margin的异同点介绍

    总结而言,padding和margin是CSS布局中经常使用的属性,通过精确控制元素的内边距和外边距,可以实现页面布局的美观和功能性。了解两者的异同点,有助于我们在实际开发中作出更为合理的布局决策。

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...

    CSS+div布局常用用法

    `div`标签是HTML中最常用的标签之一,常被用来作为容器,通过CSS进行样式设置和布局调整。 #### 二、浮动布局(Float) **1. 浮动的基本概念** - **取值**:`none`、`left`、`right` - `none`:默认值,对象不...

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    各浏览器padding、margin的差异

    在网页设计与开发过程中,经常遇到的一个问题是不同浏览器对CSS属性(如`padding`和`margin`)的解释存在差异。这种差异可能导致页面布局在不同浏览器中的表现不一致,进而影响用户体验。本文将详细探讨各浏览器中`...

    CSS深入学习之让你认识不一样的margin

    文章还探讨了margin负值的使用方法和效果。负值可以将元素向相反的方向移动,这在进行元素居中布局时非常有用,例如可以通过设置负的margin-top和margin-left来实现绝对定位元素的居中。 最后,文章讨论了margin和...

    css行内元素padding,margin,width,height没有变化

    由于这种布局差异,行内元素在设置一些CSS属性时表现得与块状元素大相径庭,特别在处理宽度(width)、高度(height)、内边距(padding)和外边距(margin)时。 一、行内元素与宽度 行内元素的宽度默认是根据内容...

    CSS3常用方法

    ### CSS3常用方法详解 #### 一、选择器与路径优化 - **Class选择器**:在多数情况下,推荐使用`class`...以上内容涵盖了CSS3中的常见方法和技术点,通过这些技术的应用,可以更好地管理和优化网页布局,提升用户体验。

    css常用代码大全(html+css代码).pdf

    `height`和`width`设置元素的高度和宽度,`padding`和`margin`分别定义元素的内边距和外边距。`float`用于实现元素的浮动,常用于创建多列布局,`clear`则清除浮动影响,避免内容被浮动元素覆盖。 边框相关属性包括...

    常用css缩写语法总结

    本文将深入探讨CSS中常见的缩写形式,包括字体(font)、边距(margin)和内填充(padding)以及边框(border)。 1. **字体缩写(font)** `font`属性的缩写允许一次性定义字体样式、大小、行高和字体家族。基本...

    css中margin属性详细分析.docx

    理解margin的特性和使用方法对于创建具有良好布局的网页至关重要。 首先,margin属性可以独立设置上、右、下、左四个方向的外边距,分别对应margin-top、margin-right、margin-bottom和margin-left。同时,CSS允许...

    常用CSS跟JS效果整理

    3. **盒模型**:理解内容(content)、内边距(padding)、边框(border)和外边距(margin)的概念,以及如何调整它们以控制元素大小。 4. **响应式设计**:使用媒体查询@media,让网页适应不同设备的屏幕尺寸。 5. **动画...

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    在传统的CSS2.1盒模型中,元素的宽度和高度只包含内容区,不包括`padding`和`border`。这种模型被称为`content-box`模型。 然而,当`box-sizing`属性设置为`border-box`时,元素的宽度和高度将包括内容区、内边距和...

Global site tag (gtag.js) - Google Analytics