10-padding(内边距)

padding

padding:就是内边距的意思,它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

padding的设置

padding有四个方向,分别描述4个方向的padding。

描述的方法有两种

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性,用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;

/*上下左右*/
padding: 20px;

一些标签默认有padding

比如ul标签,有默认的padding-left值。

那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

*{
  padding:0;
  margin:0;
}

But,这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)

https://meyerweb.com/eric/tools/css/reset/

我们现在初学可以使用通配符选择器

原文地址:https://www.cnblogs.com/leolichao/p/9468332.html

时间: 2024-11-09 19:54:23

10-padding(内边距)的相关文章

padding(内边距)、margin(外边距)、border(边框)

元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 margin 设置为负值,元素将会变大.

padding 内边距

1.单个方向的样式 padding-top: 100px; padding-right: 100px; padding-bottom: 100px; padding-left: 100px; 2.复合样式 padding: 100px; /*4个方向都是100px*/ padding: 100px 50px; /*上下是100px,左右是50*/ padding: 100px 50px 20px; /*上是100px,左右是50px,下是20px*/ padding: 100px 50px 20

38 内边距 padding 1 padding-top right left bottom 2 盒子的大小 3 设置padding内边距 子元素默认都是在父元素的内容区

1 2   原文地址:https://www.cnblogs.com/anvivi/p/9708687.html

CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

可以简易设置文字内边距的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> @interface EdgeInsetsLabel : UIL

CSS 内边距 padding 属性

CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 padding 属性可以改变上下左右的填充.   ⑶可能的值: ⑴length    定义一个固定的填充(像素, pt, em,等) ⑵%          使用百分比值定义一个填充 注意:padding 属性接受长度值或百分比值,但不允许使用负值.   ⑷示例1:如果你希望所有 h1 元素的各边都有

关于盒模型的外边距padding和内边距margin

边框border属性值  solid实线   dashed虚线   dotted点线   double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表  上/右/下/左 padding: 10px 20px 30ox;三个值代表 上.左右.下 padding: 10px 20px;两个值代表  上下/左右 padding: 10px;一个值代表四个方向一致 /* 外边距 */ margin:20px 30px 30px 30px;若有四个值代表 

CSS权威指南 - 内边距 边框 和 外边距

九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框出现在文档布局中,影响其他元素的框.比如一个高1inch的元素框出现在文档的开头,那么下面的元素框将至少从文档1 inch以下的位置出现. * 宽度和高度 如下图最暗一个矩形框(内容区)的高度和宽度. 一个重要问题:高度和宽度属性不能应用在行内非替换元素上.比如你应用一个高度在链接上不会影响布局.

css内边距 边框

/*1 元素的各边都有 10 像素的内边距 四个值上.右.下.左 两个上下,左右 三个值:上,左右,下*/ /*p {padding: 10%;}*/ h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } /*下面这条规则把段落的内边距设置为父元素 width 的 10%:*/ p {padding: 10px 50px 100px 20px; background: re

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框