如何消除行之间的间隙？

Question

我是HTML＆amp; CSS。我告诉我的朋友，我会用免费网站帮助他们。

我的行间有差距。我正在使用Bootstrap，我已经在这里尝试了一些建议（创建一个新的行类并定义边距/填充）但我相信它与模拟图像本身有关，或者它们顶部的悬停效果。）

如果您需要更多信息，请告诉我

＆＃13;

＆＃13;

public class CustomTextField extends JTextField implements KeyListener{

    public CustomTextField() {
        super();

        addKeyListener(this);
    }

    @Override
    public void keyPressed(KeyEvent arg0) {

    }

    @Override
    public void keyReleased(KeyEvent arg0) {

    }

    @Override
    public void keyTyped(KeyEvent event) {
        char c = event.getKeyChar();

        if (!(Character.isDigit(c) || c == KeyEvent.VK_BACK_SPACE || c== KeyEvent.VK_DELETE)) {
            event.consume();
        }
    }
}

＆＃13;

/****************************** PAGE CONTENT START***********************/

body {
    overflow-x: hidden;
 }

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
	position:absolute;
	top:0;
    padding-left: 80px;
}

#wrapper.toggled .nav-small {
	position:absolute;
	top:0;
    width: 80px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 0;
	top: 0;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
	top:0;
    margin-right: -80px;
}

/************Work Images***************/


.work_image img {
	height:100%;
	width:100%;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:0;
	padding-top:0;
}


a.darken {
	width:100%;
	height:100%;
    display: inline-block;
    background: black;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:0;
	padding-top:0;
}

a.darken img {
    display: block;
    -webkit-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

a.darken:hover img {
    opacity: 0.2;

}

.imgwrap {
	  position: relative;
	  height:100%;
	  width:100%;
}

.imgdescription {
	  position: absolute;
	  left: 30%;
	  right: 30%;
	  top:43%;
	  bottom:43%;
	  /**background: rgba(29, 106, 154, 0.72);**/
	  color: #fff;
	  font-size: 20px;
	  text-align:center;
	  text-transform:uppercase;
	  letter-spacing:2px;
	  visibility: hidden;
	  opacity: 0;
	  margin-top:0;
	  margin-bottom:0;
	  padding-bottom:0;
	  padding-top:0;
}
  
.imgwrap:hover .imgdescription {
	  visibility: visible;
	  opacity: 1;
}

.row-bottom-margin {
	  margin-bottom: 0px;
}

/************Work Images End***************/

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将a.darken img从display:block;更改为display:inline-block;：

/****************************** PAGE CONTENT START***********************/

body {
    overflow-x: hidden;
 }

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
	position:absolute;
	top:0;
    padding-left: 80px;
}

#wrapper.toggled .nav-small {
	position:absolute;
	top:0;
    width: 80px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 0;
	top: 0;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
	top:0;
    margin-right: -80px;
}

/************Work Images***************/


.work_image img {
	height:100%;
	width:100%;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:0;
	padding-top:0;
}


a.darken {
	width:100%;
	height:100%;
    display: inline-block;
    background: black;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:0;
	padding-top:0;
}

a.darken img {
    display: inline-block;
    -webkit-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

a.darken:hover img {
    opacity: 0.2;

}

.imgwrap {
	  position: relative;
	  height:100%;
	  width:100%;
}

.imgdescription {
	  position: absolute;
	  left: 30%;
	  right: 30%;
	  top:43%;
	  bottom:43%;
	  /**background: rgba(29, 106, 154, 0.72);**/
	  color: #fff;
	  font-size: 20px;
	  text-align:center;
	  text-transform:uppercase;
	  letter-spacing:2px;
	  visibility: hidden;
	  opacity: 0;
	  margin-top:0;
	  margin-bottom:0;
	  padding-bottom:0;
	  padding-top:0;
}
  
.imgwrap:hover .imgdescription {
	  visibility: visible;
	  opacity: 1;
}

.row-bottom-margin {
	  margin-bottom: 0px;
}

/************Work Images End***************/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="row row-bottom-margin">
          <div class="col-sm-6">
            <div class="work_image">
              <a href="#" class="darken imgwrap">
                <img src="http://placehold.it/350x150" alt="image-1">
                <h1 class="imgdescription">Lorem Ipsum</h1>
              </a>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="work_image">
              <a href="#" class="darken imgwrap">
                <img src="http://placehold.it/350x150" alt="image-2">
                <h1 class="imgdescription">Lorem Ipsum</h1>
              </a>
            </div>
          </div>
        </div>
        <div class="row row-bottom-margin">
          <div class="col-sm-6 row-bottom-margin">
            <div class="work_image">
              <a href="#" class="darken imgwrap">
                <img src="http://placehold.it/350x150" alt="image-3">
                <h1 class="imgdescription">Lorem Ipsum</h1>
              </a>
            </div>
          </div>
          <div class="col-sm-6 row-bottom-margin">
            <div class="work_image">
              <a href="#" class="darken imgwrap">
                <img src="http://placehold.it/350x150" alt="image-4">
                <h1 class="imgdescription">Lorem Ipsum</h1>
              </a>
            </div>
          </div>
        </div>
        <div class="row row-bottom-margin">
          <div class="col-sm-6 row-bottom-margin">
            <div class="work_image">
              <a href="#" class="darken imgwrap">
                <img src="http://placehold.it/350x150" alt="image-1">
                <h1 class="imgdescription">Lorem Ipsum</h1>
              </a>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="work_image">
              <a href="#" class="darken imgwrap">
                <img src="http://placehold.it/350x150" alt="image-2">
                <h1 class="imgdescription">Lorem Ipsum</h1>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>