如何删除节标签之间的空格

时间：2017-05-24 02:34:40

标签： html css

我在删除代码的两个部分之间的空格时遇到了一些麻烦。

这是JSFiddle of my code。

/********************Intro**********************/

.intro-content {
    padding-top:  250px;
}

.intro-content h1 {
    font-family: "Arial Black";
    font-weight: bolder;
}

#typed {
    font-family: monospace;
    font-size: 20px;
}

.button {
    padding-top: 50px;
}

.button button {
    background-color: black;
    border-color: black;
    border-radius: 25px;
    color: white;
    font-weight: bolder;
    margin-bottom: 22%;
}



/********************Intro*********************/



/********************Contact*********************/

#about {
    background-color: lightgray;
}

#skill {
    background-color: lightblue;
}

#intro-section {
    background-color: lightgreen;
}


 .contact-info h4 {
    font-family: "Arial Black";
    font-weight: bolder;
}


.contact-icon {
    padding-top: 50px;
}

.contact-block {
    padding-top: 20px;
    align-content: center;
    margin-left: 5%;
}

.aboutme h1 {
    padding-top: 50px;
    margin-left: 50px;
    font-family: "Arial Black";
    font-size: 50px;
    color: black;
    font-weight: bolder;
    text-shadow: 2px 2px darkgray;
}

.my-contact .contact-info {
    display: table-cell;
    font-size: 18px;

}

.my-contact .contact-icon span {
    font-size: 20px;
    margin-right: 15px;
    float: left;
    margin-top: 25px;
}

.contact-summary  {
    padding-top: 70px;
    font-style: italic;
    font-size: 20px;
}


.contact-developer {
    padding-top: 95px;
    margin-bottom: 7%;
    font-size: 15px;
    font-weight: bold;
}

/********************Contact*********************/
<!----------------------Intro-------------------------------->


<section id="intro-section" class="intro">
    <div class="intro-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h1>HELLO, I'M ERIC.</h1>
                    <div id="typed-strings">
                        <p>Welcome to my personal website!</p>
                        <p>UI DESIGNER / WEB DEVELOPER</p>
                    </div>
                    <span id="typed"></span>
                    <div class="button">
                        <button>GET IN TOUCH</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!----------------------Intro----------------------------->

<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
    <h1>ABOUT ME</h1>
    <div class="container-fluid">
        <div class="contact-block clearfix">
            <div class="row">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="contact-summary">
                            <p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
                                I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
                                fully functional website. If you have an idea, I will make it happen. You can reach me at
                                one of my contact options below.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-user"></span>
                            <div class="contact-info">
                                <h4>Name:</h4>
                                <p>Eric</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-envelope"></span>
                            <div class="contact-info">
                                <h4>Email:</h4>
                                <p>e@gmail.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-phone"></span>
                            <div class="contact-info">
                                <h4>Phone:</h4>
                                <p>(563)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-calendar"></span>
                            <div class="contact-info">
                                <h4>Date of Birth:</h4>
                                <p>April</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-globe"></span>
                            <div class="contact-info">
                                <h4>Location:</h4>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-flag"></span>
                            <div class="contact-info">
                                <h4>Nationality:</h4>
                                <p>United States</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="contact-developer">
                            <p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!----------------------Contact----------------------------->

1 个答案:

答案 0 :(得分：4)

这是h1在父母之外崩溃的边际。有很多方法可以解决它，所以我只删除了h1上的上边距。

这是一个资源 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

  

如果没有边框，填充，内联内容，block_formatting_context创建或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，分钟-height或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

＆＃13;
＆＃13; 
/********************Intro**********************/

.intro-content {
    padding-top:  250px;
}

.intro-content h1 {
    font-family: "Arial Black";
    font-weight: bolder;
}

#typed {
    font-family: monospace;
    font-size: 20px;
}

.button {
    padding-top: 50px;
}

.button button {
    background-color: black;
    border-color: black;
    border-radius: 25px;
    color: white;
    font-weight: bolder;
    margin-bottom: 22%;
}



/********************Intro*********************/



/********************Contact*********************/

#about {
    background-color: lightgray;
}

#skill {
    background-color: lightblue;
}

#intro-section {
    background-color: lightgreen;
}


 .contact-info h4 {
    font-family: "Arial Black";
    font-weight: bolder;
}


.contact-icon {
    padding-top: 50px;
}

.contact-block {
    padding-top: 20px;
    align-content: center;
    margin-left: 5%;
}

.aboutme h1 {
    padding-top: 50px;
    margin-left: 50px;
    font-family: "Arial Black";
    font-size: 50px;
    color: black;
    font-weight: bolder;
    text-shadow: 2px 2px darkgray;
}

.my-contact .contact-info {
    display: table-cell;
    font-size: 18px;

}

.my-contact .contact-icon span {
    font-size: 20px;
    margin-right: 15px;
    float: left;
    margin-top: 25px;
}

.contact-summary  {
    padding-top: 70px;
    font-style: italic;
    font-size: 20px;
}


.contact-developer {
    padding-top: 95px;
    margin-bottom: 7%;
    font-size: 15px;
    font-weight: bold;
}

/********************Contact*********************/

h1 {
  margin-top: 0;
}
＆＃13; 
<!----------------------Intro-------------------------------->


<section id="intro-section" class="intro">
    <div class="intro-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h1>HELLO, I'M ERIC.</h1>
                    <div id="typed-strings">
                        <p>Welcome to my personal website!</p>
                        <p>UI DESIGNER / WEB DEVELOPER</p>
                    </div>
                    <span id="typed"></span>
                    <div class="button">
                        <button>GET IN TOUCH</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!----------------------Intro----------------------------->

<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
    <h1>ABOUT ME</h1>
    <div class="container-fluid">
        <div class="contact-block clearfix">
            <div class="row">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="contact-summary">
                            <p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
                                I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
                                fully functional website. If you have an idea, I will make it happen. You can reach me at
                                one of my contact options below.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-user"></span>
                            <div class="contact-info">
                                <h4>Name:</h4>
                                <p>Eric</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-envelope"></span>
                            <div class="contact-info">
                                <h4>Email:</h4>
                                <p>e@gmail.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-phone"></span>
                            <div class="contact-info">
                                <h4>Phone:</h4>
                                <p>(563)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-calendar"></span>
                            <div class="contact-info">
                                <h4>Date of Birth:</h4>
                                <p>April</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-globe"></span>
                            <div class="contact-info">
                                <h4>Location:</h4>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <div class="my-contact clearfix">
                        <div class="contact-icon">
                            <span class="glyphicon glyphicon-flag"></span>
                            <div class="contact-info">
                                <h4>Nationality:</h4>
                                <p>United States</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="contact-developer">
                            <p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!----------------------Contact----------------------------->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题