<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .c1{ width: 249px; height: 1000px; background-color: gray; display: inline-block; } .c2{ width: 900px; height: 1000px; background-color: red; display: inline-block; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div><!-- 注意观察这里的变化 --> </body> </html>
两个div设置行内块属性，内外边距已经设置为0了，但是两个div之间为什么还有间隙呢？修改如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .c1{ width: 249px; height: 1000px; background-color: gray; display: inline-block; } .c2{ width: 900px; height: 1000px; background-color: red; display: inline-block; } </style> </head> <body> <div class="c1"></div><div class="c2"></div><!-- 注意观察这里的变化 --> </body> </html>
将body中的连个div设置为一行就可以了。