Question

我有点麻烦，图标不会向下移动，当我使用Margin-top时（甚至在图标类上），整个部分都会向下移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MT Medical</title>

    <link rel="stylesheet" href="resources/css/style.css">
    <link rel="stylesheet" href="vendors/css/grid.css">
    <link rel="stylesheet" href="vendors/css/normalize.css">
    <link rel="stylesheet" href="vendors/css/ionicons.min.css">
    <link rel="stylesheet" href="vendors/css/animate.css">
</head>
<body>
    <header>
        <div class="row">
            <div class="top-header">
                <img src="https://placehold.it/200x200" alt="logo" class="logo">
                <p class="contact-number">(Edited out)<br>
                (Edited out)</p>
                <i class="ion-ios-telephone"></i>
                <i class="ion-ios-email"></i>
                </div>
            </div>
            <div class="row">
                <nav>
                    <ul class="navigation-menu">
                        <li><a class="nav-links" href="#">Home</a></li>
                        <li><a class="nav-links" href="#">About Us</a></li>
                    </ul>
                </nav>  
            </div>
    </header>
    <div class="about-us">
        <div class="symbol-section">
        <h1><span class="ion-information-circled main-headers"></span></h1>
        </div>
        <p class="main-p">
            After many years in the Beauty and Medical industry as a salon owner, distributor of product ranges and a creator of my own brands, educator and many years on the road in sales I have come across many types of equipment and interesting people in the Industry.<br><br>
I am asked by many of the owners who have come to know me what are the best products and Equipment in the market to purchase at an affordable cost to them. Companies selling overpriced equipment with no back up service and expensive consumables, burn many owners who are only to be left high and dry when something goes wrong. <br><br>
Working only with an exclusive portfolio of  Distributors who have built their businesses on honesty and integrity, that deliver on service and supply l can confidently bring my knowledge, skills and reputation together to be a supplier of quality, affordable Devices combined with an Australian owned and made skin care  range to the Medical and Beauty industry.

        </p>
    </div>

</body>
</html>

然后是CSS：

/*---------BASIC SETTINGS-----------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus {
    {outline: none};
}

html,
body {
    color: #3b3a3a;
    font-family: 'Yanone', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clearfix {zoom: 1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1 {
    font-size: 300%;
    font-weight: 300;
}

h2 {
    font-size: 225%;
    font-weight: 400;
}

/*---------REUSABLE CONTENT-----------*/

.row {
    max-width: 100%;
    margin: 0 auto;
}

section {
    padding: 80px 0;
}

.box {
    padding: 1%;
}

/*-----------------------------------*/
/*              HEADER               */
/*-----------------------------------*/

.top-header {
    max-width: 100%;
    height: auto;
    background-image: url(/resources/img/asanoha-400px.png);
}

.logo {
    padding: 10px;
}

.contact-number {
    float: right;
    padding: 10px;
    color: #464646;
    font-size: 130%;
    margin-right: 10px;
    margin-bottom: 80px;
    display: block;
}

.ion-ios-telephone {
    float: right;
    position: relative;
    font-size: 150%;
    margin-top: 10px;

}

.ion-ios-telephone:hover,
.ion-ios-telephone:active {
    opacity: 0.6;
    transition: 0.2s;
}

.ion-ios-email {
    float: right;
    position: relative;
    font-size: 150%;
    margin-top: 40px;
    margin-right: -22px;
}

.ion-ios-email:hover,
.ion-ios-email:active {
    opacity: 0.6;
    transition: 0.2s;
}

.main-headers {
    text-align: center;

}

.symbol-section {
    text-align: center;
    margin-top: -100px;
}

.main-p {
    width: 750px;
    margin: 0 auto;
    text-align: center;
    color: #464646;
}


/*-----------------------------------*/
/*              NAVIGATION           */
/*-----------------------------------*/

nav {
    width: 100%;
    height: 60px;
    background-color: #343434;

}

.navigation-menu {
    text-align: center;
}
.navigation-menu li {
    display: inline-block;
    padding: 10px;
    font-size: 110%;
    padding-top: 15px;
}


.navigation-menu li a:hover,
.navigation-menu li a:active {
    text-decoration: none;
    opacity: 0.6;
}

.navigation-menu li a:link,
.navigation-menu li a:visited {
    text-decoration: none;
    color: #dbdbdb;
    text-transform: uppercase;
    margin: 0 auto;
}

/*-------------ABOUT US -------*/

.about-us {
    background-image: url(/resources/img/brickwall.png);
    height: 1000px;
    width: 100%;
    margin-top: 100px;
}

然后照片，如果有任何帮助......

正如您所看到的那样，它是针对实际元素的，但当我尝试向下移动图标时，从导航栏进一步向下移动？

Answer 1

您将图标包装在<h1>标记中，该标记通常具有重要margin-bottom（如15-20px）。删除<h1>标记，您会看到图标下方的边距缩小。然后，您可以添加margin-top。

图标不会向下移动......？

1 个答案: