CODEWITHSUNDEEP
csshtml
atanyday
atanyday

Reputation: 87

How to delete space in css?

I need to delete space between the line and the picture. At screenshot it is seen that at the bottom of the line everything is ok, but on top, there is a space. It is set in .about_img:after (css file) What have I done wrong?

enter image description here

Here's the code:

.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>

Upvotes: 0

Views: 165

Answers (3)

V&#237;ctor Bonilla
V&#237;ctor Bonilla

Reputation: 51

This is caused by carriage returns or simply spaces in the code when formatting inline-block elements.

In order to fix this I would adjust .about_img img display property to block, and then set the side margins to auto like this:

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

Also you can try to remove white spaces between those elements or convert them to html comments (<!-- -->) if you need to keep the inline-block and the spaces.

Upvotes: 0

Mandarr Sant
Mandarr Sant

Reputation: 455

.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{
	position: relative;
	top:-1px;
	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>
	
	<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;
 }

Modify your code as above

Upvotes: 0

G43beli
G43beli

Reputation: 3952

try the following:

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

Upvotes: 1

Related Questions