>

코드의 두 섹션 사이의 공백을 제거하는 데 문제가 있습니다.

다음은 내 코드의 JSFiddle 입니다.

/********************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

    h1 의 마진입니다 부모 외부에서 무너지는 중입니다. 그것을 고치는 방법에는 여러 가지가 있으므로 h1 의 상단 여백을 제거했습니다. .

    여기에 리소스가 있습니다-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

    와이즈 비즈

    If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

    /********************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;
    }
    
    

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

관련 자료

  • 이전 C - 기음 - 하위 링크 목록을 함수에 전달
  • 다음 c# - 콤보 박스의 itemsource에서 드롭 다운 목록 필터링