padding不懂

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

科里昂

2017-08-01 13:56

#box1{

    width:100px;

    height:100px;

    padding:10px;

    border:1px solid red;

}

http://img.mukewang.com/5980181a0001925902160198.jpg

为什么这里设置了上下左右填充为10px了,可是盒子里面的元素“盒子1”并没有居中呢,既然上下左右padding都是10px,那么上下左右的border边框到“盒子1”上下左右的距离都应该是10px才对啊

写回答 关注

5回答

  • 乏心
    2017-08-03 00:17:07
    已采纳

    其实就是上右下左的内边距,你仔细看上和左都距离边框10px,右和下其实也有10px的内边距,但是因为右边和下边本身距离边框很远,所以你看不出右和下的距离

    怜怜 回复乏心

    padding设置为10px,那之前设置的width和height是不是就会变了呢?

    2018-03-07 12:17:33

    共 5 条回复 >

  • 慕粉3368879
    2017-09-24 21:06:54

    懂了 ,其实就是右下边距都被盒子本身的宽和高包含了,看不到而已。

  • 慕仔3497884
    2017-09-12 21:44:24

    因为内容区并不是指盒子1这三个字,而是一个放文字或图片的区域,你多添加些文字就明白了。

  • 乏心
    2017-08-03 00:27:09

    要居中的话,就你这个边框10px内边距肯定居中不了的。因为你边框太大,所以应该padding:50%;这样应该能居中。或者text-align:center;(文本居中),再设置line-hight: ;(行高,比如边框高100px,行高就设置100px),这样也能居中

    乏心 回复慕工程115...

    width,和height 没变吗? 宽高没变的话,就是你边框里面的元素太了,元素的宽高大于边框宽高的一半了,那么设置padding:50%后会把边框撑大

    2017-08-20 23:37:48

    共 2 条回复 >

  • 乏心
    2017-08-01 14:11:12

    padding是内边距,也就是 盒子1到红色上边框的距离

    科里昂

    padding:10px 10px 10px 10px代表上下左右内边距都是10px ,或者简写成padding:10px 怎么会是上边距呢

    2017-08-01 15:48:25

    共 1 条回复 >

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

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

1225314 学习 · 18230 问题

查看课程

相似问题

padding

回答 4

padding

回答 5

padding

回答 3

padding

回答 4

padding

回答 2