Inline box model element

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11         span{
12             background-color: aqua;
13 is          } 
14          .box1 { 
15              width : 100px ; 
16              height : 100px ; 
. 17              background-Color : AntiqueWhite ; 
18 is          } 
. 19          .s1 { 
20 is              / * 
21 is              the content area, padding, borders, margins
 22              content area
 23 is              
24             the setting the width and linking elements can not height
 25             width: 100px;
 26 is             height: 100px;
 27             
28             inline element may be disposed in the horizontal direction of the padding
 29            
30             inline padding element may be provided in the vertical direction, but does not affect the page layout, the page layout can affect the horizontal direction
 31 is             
32             inline frame element may be provided, but the vertical border will not affect the layout of the page
 33 is             
34 is             inline elements support from the outside in the horizontal direction, the horizontal margins do not overlap, but the summation
 35             
36             inline horizontal support element from the outside, are not supported in the vertical margins,
 37 [             * / 
38 is            padding-left : 100px ; 
39            padding-right : 100px ; 
40            padding bottom- : 50px ; 
41 is            padding-Top : 50px ; 
42 is            border : Red Solid 100px ; 
43 is           margin-left: 100px;
44           margin-right: 100px;
45          
46         }
47         .s2{
48             margin-left: 0px;
49         }
50     </style>
51        
52     </head>
53     <body>
54         <span class="s1">我是一个span元素</span>
55         <span class="s2"> I is a span element </ span > 
56 is          < span > I is a span element </ span > 
57 is          < span > I is a span element </ span > 
58          
59          < div class = "box1" > </ div > 
60      </ body > 
61 is  </ HTML >

 

Guess you like

Origin www.cnblogs.com/zuiaimiusi/p/11206017.html