如何删除css中的空间？

我需要删除线条和图片之间的空白。在屏幕截图中，可以看到在线的底部一切正常，但最重要的是有一个空间。它在.about_img中设置：after（css文件）我做错了什么？如何删除css中的空间？

下面的代码：

.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
h5.title { 
 
    margin-bottom: 10px; 
 
    font: 18px/18px Arial, sans-serif; 
 
    font-weight: bold; 
 
    color: #222222; 
 
} 
 
#about{ 
 
    text-align: center; 
 
} 
 
.about-wrap{ 
 
    margin-left: 16%; 
 
    margin-top: 70px; 
 
} 
 
.about_text{ 
 
    width: 30%; 
 
    text-align: right; 
 
} 
 
.about_right{ 
 
    text-align: left; 
 
    float: right; 
 
} 
 
.about_img{ 
 
    width: 20%; 
 
} 
 
.about_img:after{ 
 
    content: ''; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 94px; 
 
    width: 3px; 
 
    background: #f1f1f1; 
 
} 
 
.about_img img{ 
 
    display: inline-block; 
 
    width: 170px; 
 
    height: 170px; 
 
    border: 7px solid #f1f1f1; 
 
    -webkit-border-radius: 50%; 
 
     -moz-border-radius: 50%; 
 
     -o-border-radius: 50%; 
 
      border-radius: 50%; 
 
} 
 

 
.move_left_p{ 
 
    margin-right: 20%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>PSD to HTML</title> 
 
    <link type="text/css" rel="stylesheet" href="css/reset.css"/> 
 
    <link type="text/css" rel="stylesheet" href="css/index.css"/> 
 
</head> 
 
<body> 
 

 
<div id="wrapper"> 
 
     <div id="about" name="about" class="box"> 
 
      <div class="about-wrap"> 
 
       <div class="about_item clearfix"> 
 
        <div class="about_text left"> 
 
         <h5 class="title"><span>July 2010</span> <br/>Our Humble Beginnings</h5> 
 
         <p>Proin iaculis purus consequat sem cure 
 
          digni ssim. 
 
         </p> 
 
        </div> 
 
        <div class="about_img left"> 
 
         <img src="img/about_item1.png" alt=""/> 
 
        </div> 
 
       </div> 
 
       <div class="about_item clearfix move_left"> 
 
        <div class="about_text right about_right move_left_p"> 
 
         <h5 class="title"><span>January 2011</span><br/> 
 
          Facing Startup Battles</h5> 
 
         <p>Proin iaculis purus consequat sem cure 
 
          digni ssim.</p> 
 
        </div> 
 
        <div class="about_img right"> 
 
         <img src="img/about_item2.png" alt=""/> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2016-09-19 atanyday

尝试以下操作：

.about_img:after{ 
     margin: -5px auto 0 auto; 
    }

来源

2016-09-19 12:34:23 G43beli

非常感谢！它有帮助 – atanyday

.clearfix:before, 
 
.clearfix:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
h5.title { 
 
    margin-bottom: 10px; 
 
    font: 18px/18px Arial, sans-serif; 
 
    font-weight: bold; 
 
    color: #222222; 
 
} 
 
#about{ 
 
    text-align: center; 
 
} 
 
.about-wrap{ 
 
    margin-left: 16%; 
 
    margin-top: 70px; 
 
} 
 
.about_text{ 
 
    width: 30%; 
 
    text-align: right; 
 
} 
 
.about_right{ 
 
    text-align: left; 
 
    float: right; 
 
} 
 
.about_img{ 
 
    width: 20%; 
 
} 
 
.about_img:after{ 
 
\t position: relative; 
 
\t top:-1px; 
 
\t right:-50px; 
 
    content: ''; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 94px; 
 
    width: 3px; 
 
    background:black; 
 
} 
 
.about_img img{ 
 
    display: inline-block; 
 
    width: 170px; 
 
    height: 170px; 
 
    border: 7px solid #f1f1f1; 
 
    -webkit-border-radius: 50%; 
 
     -moz-border-radius: 50%; 
 
     -o-border-radius: 50%; 
 
      border-radius: 50%; 
 
} 
 

 
.move_left_p{ 
 
    margin-right: 20%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
\t 
 
\t <div id="wrapper"> 
 
     <div id="about" name="about" class="box"> 
 
      <div class="about-wrap"> 
 
       <div class="about_item clearfix"> 
 
        <div class="about_text left"> 
 
         <h5 class="title"><span>July 2010</span> <br/>Our Humble Beginnings</h5> 
 
         <p>Proin iaculis purus consequat sem cure 
 
          digni ssim. 
 
         </p> 
 
        </div> 
 
        <div class="about_img left"> 
 
         <img src="img/about_item1.png" alt=""/> 
 
        </div> 
 
       </div> 
 
       <div class="about_item clearfix move_left"> 
 
        <div class="about_text right about_right move_left_p"> 
 
         <h5 class="title"><span>January 2011</span><br/> 
 
          Facing Startup Battles</h5> 
 
         <p>Proin iaculis purus consequat sem cure 
 
          digni ssim.</p> 
 
        </div> 
 
        <div class="about_img right"> 
 
         <img src="img/about_item2.png" alt=""/> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

.about_img:after{ 
    position: relative;<!----------solution--------> 
    top:-1px;<!----------solution--------> 
    right:-50px;<!----------solution--------> 
    content: ''; 
    display: block; 
    margin: 0 auto; 
    height: 94px; 
    width: 3px; 
    background:black; 
}

修改代码如上

来源

2016-09-19 12:34:09

这是由回车或代码只是空间格式化inline-block元素时引起的。

为了解决这个问题我会调整.about_img imgdisplay财产block，然后设置边距auto这样的：

.about_img img{ 
    display: block; 
    width: 170px; 
    height: 170px; 
    border: 7px solid #f1f1f1; 
    border-radius: 50%; 
    margin-right: auto; 
    margin-left: auto; 
    }

你也可以尝试删除这些元素之间的白色空间或将它们转换到html评论（），如果你需要保持inline-block和空格。

来源

2016-09-19 12:38:18

如何删除css中的空间？

回答

相关问题