How do I clear a few pixels of white space below an image?

Method 1: img{display:block; } img{vertical-align:top; } in addition to the top value, but also can be set to the text - top | middle | | bottom text - bottom even specific < length > and < percentage > value can be method 3: # test {the font - size: 0; line-height:0; } #test is the parent element of imgCopy the code

How do I align text vertically with the text input field?

input{vertical-align:middle; }Copy the code

How do I center a single line of text vertically inside a container?

#test{height:25px; line-height:25px; }Copy the code

How do I make the color of a hyperlink look different after a visit and still retain hover and active effects after a visit?

a:link{color:#03c; } a:visited{color:#666; } a:hover{color:#f30; } a:active{color:#c30; } You can set the hyperlink style in the l-V-H-A order, which can be stenographed as LoVe or HAte.Copy the code

Why cannot IE set the color of the scrollbar in Standard Mode?

html{ scrollbar-3dlight-color:#999; scrollbar-darkshadow-color:#999; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eee; scrollbar-arrow-color:#000; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; scrollbar-base-color:#ddd; } Define the scrollbar color style originally set on the body to the HTML tag selectorCopy the code

How do I force text overflow boundaries to be displayed on a single line without newlines?

#test{width:150px; white-space:nowrap; } Set the width and white-space of the container to nowRAP, similar to the < noBR > tagCopy the code

How do I make text overflow borders appear as ellipses?

Method (this method is not supported by Firefox5.0) : #test{width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }Copy the code

How do I wrap consecutive long strings?

#test{width:150px; word-wrap:break-word; } word-wrap's break-word value allows word breaksCopy the code

How do I clear the float?

Method 1: #test{clear:both; } #test is the next sibling of the floating element method 2: #test{display:block; zoom:1; overflow:hidden; } #test is the parent element of the float element. Zoom :1 can also be replaced by a fixed width or height method 3: #test{zoom:1; } #test:after{display:block; clear:both; visibility:hidden; height:0; content:''; } #test is the parent element of the float elementCopy the code

How to define the cursor shape of the mouse pointer to be hand shaped and compatible with all browsers?

#test{cursor:pointer; } If cursor is set to hand, only IE and Opera support it, and hand is a nonstandard property valueCopy the code

How do I center a container of known height horizontally and vertically on a page?

#test{ position:absolute; top:50%; left:50%; width:200px; height:200px; } Know More: How can a container with known height be centered horizontally and vertically on a pageCopy the code

How to center an image of unknown size horizontally and vertically in a container of known width and height?

#test{ display:table-cell; display:block; position:relative; width:200px; height:200px; text-align:center; vertical-align:middle; } #test p{ position:absolute; top:50%; left:50%; margin:0; } #test p img{ position:relative; top:-50%; left:-50%; vertical-align:middle; } #test is the grandfather of img and p is the parent of imgCopy the code

How do I set the width and height of a span (that is, how do I set the width and height of inline elements)?

span{display:block; width:200px; height:100px; }Copy the code

How do I define multiple CSS rules for an element?

.a{color:#f00; } .b{background:#eee; } .c{background:#ccc; } < div class = "b" > 1 < / div > < div class = "a, c" > test 2 < / div >Copy the code

How do I fill a page with an element?

html,body{height:100%; margin:0; } #test{height:100%; }Copy the code

How do I keep an element 10 pixels from the top, right, bottom, and left sides of the window?

html,body{height:100%; margin:0; } #test{position:absolute; top:10px; right:10px; bottom:10px; left:10px; }Copy the code

How to remove the dotted box of hyperlinks?

a{outline:none; <a onfocus="this.blur();" .Copy the code

How is the container transparent but the content opaque?

.outer{width:200px; height:200px; background:#000; filter:alpha(opacity=20); opacity:.2; } .inner{width:200px; height:200px; margin-top:-200px; } <div class="outer"><! </div> <div class="inner"> </div> <div class="inner"> </div class="inner"> </div>  .outer{width:200px; height:200px; Background: rgba (0, 0, 2); background:#000\9; filter:alpha(opacity=20)\9; } .outer .inner{position:relative\9; } <div class="outer"> <div class="inner"> I am opaque content </div> </div> Advanced browser directly using RGBA color value implementation; Internet Explorer can also achieve this by defining container transparency and positioning child nodes relative to each otherCopy the code

How do I center the entire page horizontally?

body{text-align:center; } #test2{width:960px; margin:0 auto; text-align:left; } Defining the text-align value of the body as center will center Internet Explorer 5.5Copy the code

Why is the background color of the container not displayed? Why can’t containers adapt content height?

This is usually caused by not clearing the floatCopy the code

How to make a table with 1 pixel thin border?

Method 1: #test{border-collapse:collapse; border:1px solid #ddd; } #test th,#test td{border:1px solid #ddd; } < table id = "test" > < tr > < th > name < / th > < td > Joy Du < / td > < / tr > < tr > < / th > < th > age 26 < / td > < td > < / tr > < / table > method 2:  #test{border-spacing:1px; background:#ddd; } #test tr{background:#fff; } < table id = "test" cellspacing = "1" > < tr > < th > name < / th > < td > Joy Du < / td > < / tr > < tr > < / th > < th > age 26 < / td > < td > < / tr > < / table > Internet Explorer 7 and earlier browsers do not support border-spacing, but can replace it with the table label attribute cellspacing.Copy the code