您的位置
主页 > 网站技术 > CSS/HTML > » 正文

padding盒子内部文字跟盒子之间的距离

来源: 站长圈 点击:

点评:如果说margin是盒子与盒子之间的距离,那么padding就是盒子内部文字跟盒子之间的,本例就来为大家详细介绍下,对此概念不是特别清楚的朋友可以参考下,希望对大家有所帮助!

padding:如果说margin是盒子与盒子之间的距离,那么padding就是盒子内部文字跟盒子之间的距离 

复制代码代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<title>padding 文字到p边框的距离</title> 

<style> 

#myp{ 

height:100px; 

width:100px; 

background:yellow; 

padding:10px 20px 30px 40px; 

</style> 

</head> 

<body> 

<p id="myp"> 

我送你离开千里之外你是否还在。</p> 

</body> 

</html> 

需要注意的是:height跟width并不包括padding的,如果使用padding,那么实际的大小应该加 

上padding的大小,而且background的颜色就是padding的颜色。 

总结:一个盒子,有margin,border,padding,实际占据多少空间? 

垂直方向:height+padding-top+padding-bottom+border-top+border-bottom+margin-top 

+margin-bottom 

水平方向:width+padding-left+padding-right+border-left+border-right+margin-left 

+margin-right 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明