HTML serial 39- margins merger phenomenon, as well as box model width and height

First, in the vertical direction of the default layout, by default, margins are not superimposed Yes, there will be consolidation phenomenon, whose large margins, who heard; but this situation does not occur in the horizontal direction we give an example

 

 

       {span 

            Run the display: inline-Block; 

            width: 100px; 

            height: 100px; 

            border: 1px Solid Red; 

        } 

        div { 

            width: 100px; 

            height: 100px; 

            border: 1px Solid Green; 

        } 

        / * We let the span of two boxes, * apart 100px / 

        .hezi1 { 

            margin-right: 50px 

        } 

        .hezi2 { 

            margin-left: 50px; 

        } 

        .box1 { 

            margin-bottom: 50px; 

        } 

        .box2 { 

            margin-Top: 50px; 

        } 

....... ... omitted the code ..........

<span class="hezi1">我是span</span>

<span class="hezi2">我是span</span>

<div class="box1">我是span</div>

<div class="box2">我是span</div>

 

Second, the box model

1. What is the box model

A: CSS box model is only a relatively figuratively, HTML tags are all in the box, most of our items are real life the position of zoning.

Note: All HTML tags can all be set up: width height, padding, borders, margins

2. For example:

 

<style>

        span,a,b,strong{

            display: inline-block;

            width:150px;

            height:150px;

            padding:20px;

            border:2px dotted red;

            margin:10px;

        }

</style>

........省略代码..........

<span>我是span</span>

<a href="#"> I am a hyperlink </ A > 

< b > I is bold </ b > 

< strong > I emphasize </ strong >

 

Interpretation: by Google developer tools, we can see, the area of ​​each label belongs numbers between them, they are strictly in accordance with the definition of instructive model of the F12.

2. The width and height of the box model

The width and height (1) content: width \ height set the width and height

Width and height (2) element: the border width and height of the content plus padding plus

(3) the width and height of space elements: rimming margins content plus padding plus the width and height

 

Third, the source code:

d109_margin_merge.html

d110_box_model.html

address:

https://github.com/ruigege66/HTML_learning/blob/master/d109_margin_merge.html

https://github.com/ruigege66/HTML_learning/blob/master/d110_box_model.html

2.CSDN: https: //blog.csdn.net/weixin_44630050 (Xi Jun Jun Moods do not know - Rui)

3. Park blog: https: //www.cnblogs.com/ruigege0000/

4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package