CSS里的padding是什么意思?

html-css0130

CSS里的padding是什么意思?,第1张

Padding(填充)属性定义元素边框与元素内容之间的空间。

Padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。单独使用填充属性是在一个声明中设置元素的所内边距属性。缩写填充属性也可以使用,一旦改变一个数值,则padding对应的距离都会改变。

扩展资料:

可能的值:

auto:浏览器计算外边距。

length:规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

%:规定基于父元素的宽度的百分比的外边距。

inherit:规定应该从父元素继承外边距。

内外距离区别:

margin与padding如何进行区分,这是很多学html人的困扰,其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。

参考资料来源:百度百科-padding

第一种方式:设置body 居中。在CSS中的代码是(body{text-align:center})

第二种方式:用盒子模型,首先设置一个Div ,这个DIV的宽度为100%,然后在这个DIV居中,那么在这个DIV中加的内容就居中显示,代码如下:

<div class="div1">

<div class="div2"></div>

</div>

CSS 样式代码:

<style type="text/css">

.div1{text-align:centerwidth:100%}

.div2{width:980pxbackground:red} //为了看清效果,加了背景颜色

</style>

第三种方式:margin:0 auto;

通常的方法为:先设置div的宽度,然后使用如下样式:

1margin: 10px auto /* 上下边距10px,左右边距自动以达到左右居中的目的*/

以下为示例:

HTML代码中给出div

123   <div class="outer">    <div class="content"></div></div>   

添加样式

1234567   /*外层边框*/div.outer{width:200pxheight:150pxborder:1px solid green}div.content{    width:100pxheight:50px /*设置大小*/    margin:20px auto        /*设置左右边距自动以使其居中*/    border:1px solid red}   

显示效果

1、按钮的margin-left:-10px这样的负值。或者学度娘,取消input边框另作。

2、css里面font-size:16pxfont-family:"Times New Roman",Georgia,Serif这样。

3、可以设置input的type为image,然后加背景图片。

给出一个例子

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

    <meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

    <title>test</title>

    <link rel="stylesheet" href="css.css" type="text/css" media="screen">

    <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>

</head>

<body>

    <div class="search">

        <input id="search" type="text" autofocus="autofocus" >

        <div class="submit">搜索</div>

    </div>

    <style type="text/css">

        .search{width:300pxoverflow: hiddenborder:1px solid #dddfont-size:16pxheight:2emline-height: 2em}

        .search:hover{border:1px solid #00af60}

        .search input#search{padding-left: 10pxoutline: nonewidth:230pxborder:0}

        .search .submit{cursor:pointerfloat: rightpadding:0 10pxcolor: #00af60border-left: 1px solid #ddd}

        .search:hover .submit{background: #00af60color:#FFFborder:0/*background:url(1.jpg)*/}

    </style>

    <script type="text/javascript">

        $(function(){

            $('.search').hover(function(){$('#search')[0].focus()})//

            $('.search .submit').click(function(){

                alert("在此检查然后js提交")

            })

        })

    </script>

</body>

</html>