`
天之痕苏
  • 浏览: 18366 次
文章分类
社区版块
存档分类
最新评论

padding和margin的区别

 
阅读更多

最近在做界面,出现了如下问题:

可以看出,图中圈出来的就是问题所在,左右两边和下面是不对齐的,而bootstrap代码中,全部都是12个栅格:

<div class = "col-md-12 col-sm-12 col-lg-12">
<span style="white-space:pre">	</span><img alt="" src="/EVM/img/sac_jietu14.jpg" style = " width:100%">
</div>
所以,经同学提醒,知道了问题所在,就是元素的内边距padding属性的设置出了问题。

下面给出padding的相关介绍。

padding是CSS中的一个属性,用来设置元素的内边距,这里的内边距包括四个方面的边距:上下边距、左右边距。

1、四个参数

eg: padding:10px 5px 10px 12px;

  • 上内边距是10px;
  • 右内边距是5px;
  • 下内边距是10px;
  • 左内边距是12px.

四个参数情况下的顺序是顺时针方向,即上、右、下、左。

2、三个参数

eg: padding: 10px 12px 20px;

  • 上内边距是10px;
  • 左右内边距是12px;
  • 下内边距是20px;

3、两个参数

eg: padding: 12px 23px;

  • 上下内边距是12px;
  • 左右内边距是23px;

4、一个参数

eg: padding: 10px;

  • 所有的4个内边距都是10px;

5、padding基础:

  • 默认值:0px;
  • 继承性:no;
  • 版本:CSS1;
  • js语法:object.style.padding = "10px 20px"; (上下10px,左右20px)

所以,在上述代码的div中加入style = "padding:0px"就可以解决问题。

<div class = "col-md-12 col-sm-12 col-lg-12" style="padding:0px">
	<img alt="" src="/EVM/img/sac_jietu14.jpg" style = " width:100%">
</div>

上面用红线标注出来的就是没有加入 style = "padding:0px";时的div内边距情况。可看出左右两边都是有空隙的,但是上下是没有空隙的,所以加入style="padding: 0px";就可以保证4个内边距都是0px。

而对于margin,是指的元素的内边距,其用法和padding相似。














分享到:
评论

相关推荐

    padding和margin区别

    padding和margin区别 padding和margin区别 padding和margin区别padding和margin区别

    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...

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

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

    android_中_padding与margin

    总之,理解并熟练掌握`padding`与`margin`的区别及应用场景对于Android开发者来说至关重要。这不仅有助于提高应用的美观度,还能提升用户的使用体验。希望本文能帮助您更好地理解和运用这两个属性。

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

    #### 五、`margin`与`padding`的区别 虽然`margin`与`padding`都可以用来创建元素间的空白,但它们之间存在明显的区别: 1. **作用范围**: - `margin`:控制元素外部的空白,不占用空间。 - `padding`:控制...

    Alignment、Margin 和 Padding 概述

    ### Alignment、Margin 和 Padding 概述 在 Windows Presentation Foundation (WPF) 开发过程中,对元素进行精确定位是一项至关重要的任务。为了更好地理解和运用这些技术,本篇将详细介绍 `HorizontalAlignment`、...

    09_盒子模型-padding和margin对比.html

    09_盒子模型-padding和margin对比

    css中padding和margin的异同点介绍

    - 功能区别:padding定义的是元素内容与边框之间的空间,而margin定义的是元素边框与相邻元素之间的空间。 - 背景显示:在具有背景的元素上,padding区域会显示背景,但margin区域不会。 - 内联元素:对于内联元素,...

    CSS的margin和padding

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

    各浏览器padding、margin的差异

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

    CSS中margin和padding的区别浅析

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

    Android中gravity、layout_gravity、padding、margin的区别小结

    在Android开发中,理解并熟练运用`gravity`、`layout_gravity`、`padding`和`margin`是非常关键的,它们决定了视图(View)在布局(Layout)中的位置和内部元素的间隔。下面将详细阐述这四个概念的区别和用法。 ...

    关于ol和ul的padding和margin默认值

    这些列表元素在不同的浏览器中可能有不同的默认样式,尤其是涉及到`padding`和`margin`属性。`padding`是元素内部边距,而`margin`是元素与周围元素之间的空白区域。 在《CSS Mastery》一书中提到,Internet ...

    Class与ID区别 margin和padding区别 CSS学习笔记

    CSS学习笔记 - Class与ID区别、margin和padding区别 在CSS学习中,有两个非常重要的概念:Class与ID和margin与padding。虽然它们都是CSS中的基本概念,但是许多初学者却不知道它们的区别和使用场景。 Class与ID...

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

    在网页布局设计中,我们经常会遇到这样一个问题:当一个元素(如`div`)的宽度设置为`width: 100%`时,如果再添加`padding`或`margin`,元素的总尺寸会超出其父元素的宽度,导致布局混乱。为了解决这一问题,我们...

    常用元素默认margin和padding值问题探讨

    而在这些视觉样式定义中,margin(外边距)和padding(内边距)是非常常用的两个属性,它们用于调整元素与元素之间的空间以及元素内容与元素边界之间的空间。由于不同的浏览器可能会有不同的默认样式,因此开发者在...

    盒模型的介绍,以及margin(外边距)padding(内边距)的使用.zip

    - **百分比值**:`padding`和`margin`可以使用百分比值,相对于父元素的宽度(对于`margin`,在大多数情况下是这样),这在响应式设计中非常有用。 - **自动值**:`margin`和`padding`可以设置为`auto`,这通常用于...

Global site tag (gtag.js) - Google Analytics