CSS spacing
Padding: the distance between the inside of the element from the element
<Div> Hello </ div>
--------------------------
<style>
div{
width:200px;
height:200px；
background:red；
padding-top: 22px; generating distance from the top of the text
padding-left: 30px text from the left side of the border there is a distance
}
</style>
Note: padding can change the actual size of the element,
Direct padding: 30px 30px 39px 30px. Changing the element size corresponding to a top, right, bottom, left. Clockwise direction.
padding: 22px 33px. When two elements, the first element of the representative of the upper and lower edges. The second represents the left and right sides.
padding: 30px. An element of time, representatives of all four sides 30px.
Outer pitch: pitch distance element surrounding elements
<div class= “ggg”></div>
<div class= “hhh”></div>
----------------------- let down ggg and hhh apart 20px
<style>
div{
width:200px;
height:200px;
.ggg{
background:red
margin-bottom: 20px 20px representatives from around the bottom element
margin-left: 20px 20px from the left border, no effect is provided to the right, because there is no element on the right}
.hhh {
background:green}
</style>
Note, margin: 20px 30px 33px 22px without changing the element size corresponding to a top, right, bottom, left. Clockwise direction. When the two elements of time; a time element and padding same.
Related tips:
Set the horizontal center margin: 0 auto
Setting a negative value, so that border merger margin-top: -10px
Box model, the size of the actual content size + = border (border) + Padding (padding) + margins (margin)
<div class= “box”></div>
<div class= “box2”></div>
-----------------------------------------------
<style>
.box{
width:200px;
height:200px;
background:black;
border：10px solid red
padding：10px}
</style>
Problem-solving elements to change the size of the padding
<style>
.box2{
width:200px;
height:200px;
padding：10px
border：10px solid red
box-sizing: border-box ### of this code can make borders and padding does not affect the size of the element itself}
</style>
Block elements, inline elements, block elements inline
Block elements: div, p, ul, li, h1-h6, a separate line ..... for all styles
The default block element width is the width of the parent Set
Inline elements : a, span, em, b , a separate line is not
<body>
hahsjdjnd<span>1111</span，2222
----------------------------------
<style>
span{
height：22px
width：22px
backgrou：green
margin：20px
padding:22px}
</style>
Note: Inline element support part, the width and height are not supported, not supported by the upper and lower margin. (Support around margin) is determined by the width and height of the font.
Inline block elements: no separate line. It can be applied to all styles, such as input
<body>
hahsjdjnd<input type= "text">，2222
</body>
Switching element type
<div class= “box”>1</div>
<div class= “box2”>2</div>
<div class= “box3”>3</div>
-----------------------------
.box,.box2.box3{
width:100px
height: 100px} is now block element
## into block elements inline elements, display the following was added: inline,
.box,.box2.box3{
width:100px
height:100px
display: inline} inline now. Inline elements wide high NA, related to fonts
### block elements into a block element inline added display: inline-block,
.box,.box2.box3{
width:100px
height:100px
display：inline-block}
-------------------------------------------------------------
Inline element is converted into block elements and block element inline
<body>
<span>11111<span>
<span>22222<span>
<span>33333<span>
<span>44444<span>
</body>
Inline element is converted into a block element
<style>
span{
width:22px
height：22px
display:block}
<style>
Converted into inline elements block elements inline
span{
width:22px
height：22px
display:inline-block}
Note: displa four properties. Representative inline inline elements, block represents a block element, inline-block representative for the block (generally the block elements and block inline style can be applied to all, loaded into inline reasons do not want to block a separate line)
display: none. Elements disappear. And hover with the mouse-over display,
Write display in the hover: block. None become the block, the elements on the show