padding不会撑开盒子的情况

注意：

• 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）
• 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
• 如果一个盒子没有给定宽度/高度，就会用其父类的属性，这时padding不会影响盒子的大小

课堂实例：

	
	
	


	

		
123
	

作业：自己瞎鼓捣的

	
	
	


	

		
演员表：
		

			
剧中饰演：
		
		

			
姓名：
		
	

上面的实际效果是这样的：

• 用来实现这个过程中：遇到了一些困难：
  • 首先是，如何在一个盒子里实现两行文字：用浮动特性
  • 接着，如何缩短父盒子和子盒子文字之间的距离：用line-height设置行距
  • 但在上面的过程中，会发现“演员表”会超出边界，用padding-top来设置文字距离边框的距离

如果把盒子里面的注释取消就会发现：盒子在有宽度的情况下，padding-left会撑开盒子的大小

好的，分享到这！