Question

我正在尝试删除我的图块之间的空白区域，如下图所示：

这就是我目前所拥有的：

这是第二张照片的标记，这是我现有的照片：

CSS

 .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

        /* Overlay text */
    .module {
        background-color: lightgray;
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
        margin: 20px;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

    * {
        box-sizing: border-box;
    }

HTML

<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
        <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
</div>

有人可以建议我删除瓷砖之间的所有空白区域吗？

由于

Answer 1

＆＃13;

 .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
.newClass{
        background-color: lightgray;
        padding: 0px!important;
        margin:0px!important;
}
.red{
    background-color: red!important;
}
        /* Overlay text */
    .module {
        background-color: #abc;
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

    * {
        box-sizing: border-box;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
        <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
         <div class="module red">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
</div>

＆＃13;

http://jsfiddle.net/qbo8pk8j/3/

Answer 2

这是小提琴：http://jsfiddle.net/q5yfcs2p/

我删除了type SomeType = T1 of int | T2 of string type Detail = Detail with static member ($) (Detail, someTypeVal : int) = T1 someTypeVal static member ($) (Detail, someTypeVal : string) = T2 someTypeVal let inline createSomeType' (someTypeVal : ^T) = Detail $ someTypeVal中的边距，并为.module添加了自定义类，因为bootstrap在他的边上有填充。此col-*-*类会删除左侧和右侧。

.no-padding

Answer 3

padding div上有col，margins div中有module。看演示： http://jsfiddle.net/swm53ran/347/

.myClass {
    padding: 0px;
}
.myClass .module {
    margin: 0px;
    outline: 1px solid black;
}

删除空白引导程序

3 个答案: