1
私はHTML & CSSを初めて使用しています。私は友人に、私が無料のウェブサイトで彼らを助けると言った。行間の空白を削除するにはどうすればよいですか？
私の行の間にはギャップがあります。私はブートストラップを使用していますが、私はここでいくつかの提案を試みました（新しい行クラスを作成し、マージン/パディングを定義しています）が、モックイメージそのもの、またはその上のホバー効果。）
あなたはもう情報が必要な場合、私はあなたがdisplay:inline-block;にdisplay:block;からa.darken imgを変更したいと思う
/****************************** 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 {
\t position:absolute;
\t top:0;
padding-left: 80px;
}
#wrapper.toggled .nav-small {
\t position:absolute;
\t top:0;
width: 80px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0;
\t top: 0;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
\t top:0;
margin-right: -80px;
}
/************Work Images***************/
.work_image img {
\t height:100%;
\t width:100%;
\t margin-top:0;
\t margin-bottom:0;
\t padding-bottom:0;
\t padding-top:0;
}
a.darken {
\t width:100%;
\t height:100%;
display: inline-block;
background: black;
\t margin-top:0;
\t margin-bottom:0;
\t padding-bottom:0;
\t 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 {
\t position: relative;
\t height:100%;
\t width:100%;
}
.imgdescription {
\t position: absolute;
\t left: 30%;
\t right: 30%;
\t top:43%;
\t bottom:43%;
\t /**background: rgba(29, 106, 154, 0.72);**/
\t color: #fff;
\t font-size: 20px;
\t text-align:center;
\t text-transform:uppercase;
\t letter-spacing:2px;
\t visibility: hidden;
\t opacity: 0;
\t margin-top:0;
\t margin-bottom:0;
\t padding-bottom:0;
\t padding-top:0;
}
.imgwrap:hover .imgdescription {
\t visibility: visible;
\t opacity: 1;
}
.row-bottom-margin {
\t margin-bottom: 0px;
}
/************Work Images End***************/<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="images/mockimage_1.jpeg" 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="images/mockimage_2.jpeg" 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="images/mockimage_3.jpeg" 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="images/mockimage_4.jpeg" 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="images/mockimage_1.jpeg" 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="images/mockimage_2.jpeg" alt="image-2">
<h1 class="imgdescription">Lorem Ipsum</h1>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
何を、正確に、それはあなたが達成したいですか？ブートストラップを使用することはおそらく賢明な学習方法ではないことをすぐに伝えることができます。なぜなら、そのHTMLコードは恐ろしく非意味的であり、完全に間違っているからです（画像のリストリンクの上にマウスを移動したときに表示されますか？） – junkfoodjunkie
はそれをcellspacingしていませんか？ –