盒子中内容不随边距而改变位置-慕课网

首页课程实战体系课手记专栏慕课教程

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

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

墨格

2016-10-16 14:06

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

写回答关注

7回答

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 0
vaceo11274204297

2016-10-16 14:56:40
首先 padding：20px 30px 0px 20px; 这个冒号不英文的，所以代码无效
padding 是指内容的填充，意思也就是留白。具体可参照盒子模型的宽度与长度中的图片，计算你所需要的位置。
0 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 0
qq_我在你身后_04197865

2016-10-16 14:30:00

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

0 0
fdjfods

2016-10-16 14:26:29

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

0 0
慕桂英6574974

2016-10-16 14:26:17

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

0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225806 学习 · 18234 问题

相似问题

怎么让边框随盒子内容多少变化

回答 3

为什么把边距改大盒子会改变大小

回答 1

这里设置div的width:100px height:100px是盒子整体(内容+内外边距+边框)？

回答 7

要怎样才会变内容大小而不是变盒子大小？

回答 2

盒子中的内容怎么超出了外边框

回答 5

打开慕课网App查看更多内容