【CSS】使用盒模型

盒子是CSS中的基础概念，我们需要使用它来配置元素的外观以及文档的整体布局。

1. 为元素应用内边距

应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。

如果使用百分数值指定内边距，百分数总是根包含块的宽度相关，高度不考虑在内。下面代码展示了如何为元素应用内边距。

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > Example   title  > 
       style   type  ="text/css"  >  
        p   {  
            border  :  10px double black  ;  
            background-color  :   lightgray  ;  
            background-clip  :   content-box  ;  
            width  :   380px  ;    
            padding-top  :   0.5em  ;  
            padding-bottom  :   0.3em  ;  
            padding-left  :   0.8em  ;  
            padding-right  :   0.6em  ;   
         } 
       style  > 
   head  > 
   body  > 
   div  > 
       p  >  
        15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。
        什么都可以从头再来，只有青春不能。
        那么多事情，跟青春绑在一起就是美好，离开青春，就是傻冒。
        p  > 
   div  > 
   body  > 
   html  >  

查看更多关于【CSS】使用盒模型的详细内容...