原因:
img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px。
处理方法:
给图片添加vertical-align:top/middle/bottom display:block; float
父元素添加font-size:0;
htmlcss
| <div class="main-box"> |
| <div class="container"> |
| <img src="http://jiuaibuni.top/dome/img/tab1.jpg"> |
| </div> |
| </div> |
| <div class="main-box"> |
| <div class="container"> |
| <img class="ture" src="http://jiuaibuni.top/dome/img/tab1.jpg"> |
| </div> |
| </div> |
| .main-box,.container,.main-box img{ |
| width: 100%; |
| height: 100% |
| } |
| .main-box{ |
| position: relative; |
| background-color: black; |
| } |
| .ture{ |
| vertical-align:top; |
| vertical-align:middle; |
| vertical-align:bottom; |
| display:block; |
| float: left; |
| } |
试一试
Comments | NOTHING