盒子中内容不随边距而改变位置

源自：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

盒子中内容不随边距而改变位置

我把padding-bottom设置为0，这不是说盒子中的内容与边框底距离为0px吗，怎么内容还是在盒子的左上角？要是想设置盒子中内容位置要怎么做？

提问者：墨格 2016-10-16 14:06

个回答

DonghuiWang: 2016-12-09 21:41:44

我觉得这个课程有点问题，你可以去W3CSchool

<p><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides">Padding</a>查看试一下</p>

摘星的你0

2016-10-16 15:17:26

冒号问题

0
vaceo11274204297

2016-10-16 14:56:40

首先 padding：20px 30px 0px 20px; 这个冒号不英文的，所以代码无效
padding 是指内容的填充，意思也就是留白。具体可参照盒子模型的宽度与长度中的图片，计算你所需要的位置。
0
摘星的你0

2016-10-16 14:42:11

在盒子里面加一个p标签，然后设置p标签的格式就可以实现了
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    width:100px;
    height:100px;
    padding：20px 30px 0px 20px;
    border:1px solid red;
}
p{padding：20px 30px 0px 20px;}
</style>
</head>
<body>
<div id="box1"><p>盒子1</p></div>
</body>
</html>
设置之后的样子

0
qq_我在你身后_04197865

2016-10-16 14:30:00

我是新手应该是给 padding-bottom加上相对定位position:relative;给内容加上position:relative;bottom:0;

0
fdjfods

2016-10-16 14:26:29

padding:20px 30px 0px 20px; 注意padding边上的这个:，用英文冒号，你可能不小心用中文冒号了,20px 30px 0px 20px,第一个20px那里是没有空格的，小细节注意下

0
慕桂英6574974

2016-10-16 14:26:17

你的设置不能与上右左产生冲突

0