边距/填充不起作用

问题描述 投票：0回答：4

我在一个主 div 中有 2 个主 div。我尝试添加大量的边距和填充来进行测试，但它只是有效。为什么我不能在它们之间添加边距/填充？请帮忙。

HTML

 <div id="mainWrapper">
    
    <header class="container">
    
        <div id="nav2" class="container">
            <ul class="nav2a">
                <li><a href="#">Login</a></li>
                <li><a href="#">Quick Search</a></li>
                <li><a href="#">Advanced Search</a></li>
                <li><a href="#">English <i class="fa fa-caret-down"></i></p></a>
                    <ul class="nav2b">
                        <li><a href="#">French</a></li>
                        <li><a href="#">Italian</a></li>
                        <li><a href="#">Spanish</a></li>
                        <li><a href="#">German</a></li>
                    </ul>
                </li>
            </ul>
        </div> <!-- end nav2 -->
        
    </header>
    
    <div class="clearfloat"></div>

   <div id="fullNav" class="container">
            
        <div id="logoSymbol">
            <a href="#">
                <img src="images/gpj-baker-symbol.png" width="54" height="51" />
            </a>
        </div>
        
        <div id="logoText">
            <a href="#">
                <img src="images/gpj-baker-text.png" width="200" height="30" />
            </a>
       </div>

        <div class="clearfloat"></div>

        <div id="mainNav">
             <ul class="nav1a">
                 <li><a href="#">Brands</a></li>
                 <li><a href="#">Fabrics & Wallcoverings</a></li>
                 <li><a href="#">Contact</a></li>
                 <li><a href="#">About Us</a></li>
                 <li><a href="#">Where To Buy</a></li>
                 <li><a href="#">Press</a></li>
            </ul>
        </div>
        
        <div class="clearfloat"></div>

        <div class="hr"><hr/></div>
        
        <div class="clearfloat"></div>

    </div> <!-- end fullNav -->
                                    
    <div class="clearfloat"></div>

    <div id="brandContainer" class="container">
       
        <div id="breadcrumbs" class="container">
            <ul class="breadInfo">
                <li><a href="#">Home</a></li>
                <li><a href="brands.html" class="currentPg">Brands</a></li>
            </ul>
        </div> <!-- end breadIcrumbs -->
                                    
        <div class="clearfloat"></div>

        <div class="brandList">
        
            <div class="brandImg">
                <a href="#"><img src="http://placehold.it/442x294" /></a>
            </div>
            
            <div class="brandCopy">
                <a href="#">
                    <img src="images/gpj-baker-text.png" width="162" height="25" />
                </a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.</p>
                
                <p>Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.</p>
                <a href="#">Explore <i class="fa fa-caret-right"></i></a>
          </div>
            
        </div> <!-- end brandList -->

        <div class="clearfloat"></div>

        <div class="brandList">
        
            <div class="brandImg">
                <a href="#"><img src="http://placehold.it/442x294" /></a>
            </div>
            
            <div class="brandCopy">
                <a href="#">
                    <img src="images/gpj-baker-text.png" width="162" height="25" />
                </a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ex, pharetra a commodo maximus, luctus id ligula. Curabitur tempus arcu ac orci fringilla varius.</p>
                
                <p>Cras hendrerit, mi interdum varius luctus, nisl lectus accumsan mauris, eu tristique arcu massa et arcu. Vivamus venenatis purus blandit, placerat urna eget, faucibus mauris.</p>
                <a href="#">Explore <i class="fa fa-caret-right"></i></a>
          </div>
            
        </div> <!-- end brandList -->
        
    </div><!-- end brandContainer -->

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;}

body {
    font-size: 16px;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, a {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

.clearfloat {
    clear: both;
}

#mainWrapper {
    margin: 0 auto;
    max-width: 1280px;
    vertical-align: middle;
    width: 100%;
}

.container {
    margin: 0 auto;
    max-width: 980px;
    vertical-align: middle;
    width: 100%;
}

header .container {
    display: block;
    float: right;
}

header #nav {
    float: right;
}

div.hr {
    border: 0.01em solid #676767;
}

#nav2 {
    float: right;
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    padding: 5px 0;
    text-transform: uppercase;
}

    #nav2 a:link,
    #nav2 a:visited {
        color: #676767;
    }
    
    #nav2 a:hover {
        color: #4284b8;
    }

    #nav2 li {
        vertical-align: middle;
        float:left;
    }

    #nav2 li,
    #nav2 li a {
        display: inline-block;
        text-decoration: none;
    }
    
    #nav2 li a {
        padding: 5px 10px;
    }

    #nav2 li ul {
        display: none;
        position: absolute;
    }
    
    #nav2 li:hover ul {
        display: block;
    }
    
    #nav2 li ul li {
        clear: both;    
    }
    
    #nav2 .nav2a {
        float: right;
    }

#fullNav {
    text-align: center;
}

    #fullNav #logoSymbol,
    #fullNav #logoText {
        display: inline;
        margin: 0 auto;
        padding: 0 5px;
    }
    
#mainNav {
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    padding: 5px 0;
    text-transform: uppercase;
}

    #mainNav a:link,
    #mainNav a:visited {
        color: #676767;
    }
    
    #mainNav a:hover {
        color: #4284b8;
    }

    #mainNav li {
        vertical-align: middle;
    }

    #mainNav li,
    #mainNav li a {
        display: inline-block;
        text-decoration: none;
    }
    
    #mainNav li a {
        padding: 5px 25px;
    }
        
    #mainNav li ul {
        display: none;
        position: absolute;
    }
    
    #mainNav li:hover ul {
        display: block;
    }
    
    #mainNav li ul li {
        clear: both;    
    }

#footerNav {
    float: right;
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    padding: 5px 0;
    text-transform: uppercase;
}

    #footerNav a:link,
    #footerNav a:visited {
        color: #676767;
    }
    
    #footerNav a:hover {
        color: #6e8878;
    }

    #footerNav li {
        vertical-align: middle;
        float:left;
    }

    #footerNav li,
    #footerNav li a {
        display: inline-block;
        text-decoration: none;
    }
    
    #footerNav li a {
        padding: 5px 10px;
    }
        
    #footerNav li ul {
        display: none;
        position: absolute;
    }
    
    #footerNav li:hover ul {
        display: block;
    }
    
#nav3b {
    display: none;
    clear: both;    
}

#nav3b a:hover {
    display: block;
}
    
    #footerNav .nav3a {
        float: right;
    }

#breadcrumbs {
    float: right;
    font-size: 9px;
    font-weight: 400;
    margin: 0 auto;
    text-transform: uppercase;
}

    #breadcrumbs .currentPg {
        color: #676767;
        font-weight:bold;
    }

    #breadcrumbs a:link,
    #breadcrumbs a:visited {
        color: #8b8b8b;
    }
    
    #breadcrumbs a:hover {
        color: #4284b8;
    }

    #breadcrumbs li {
        vertical-align: middle;
        float:left;
    }
        
        #breadcrumbs li {
            padding: 0 .25em 0 0;
        }
        
        #breadcrumbs li:after {
            content: " | ";
            display: inline-block;
            font-size: 100%;
            margin: 0 0 0 1.25em;
        }
        
        #breadcrumbs li:last-child:after {
            content: " ";
        }
        
        #breadcrumbs li,
        #breadcrumbs li a {
            display: inline-block;
            text-decoration: none;
        }
        
        #breadcrumbs li a {
            padding: 5px 10px;
        }
    
        #breadcrumbs li a:last-child {
            padding-right: 0;
        }
        
    #breadcrumbs .breadInfo {
        float: right;
        padding-bottom: 5px;
    }

.brandList {
    display: inline;
    overflow: auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.brandImg {
    display: block;
    float: left;
    margin: 0 auto;
    max-width: 442px;
    padding-right: 8px;
    vertical-align: middle;
    width: 50%;
}

.brandCopy {
    display: block;
    float: left;
    font-size: 12px;
    font-weight: 400;
    margin: 0 auto;
    overflow: hidden;
    padding-left: 8px;
    position: relative;
    text-transform: uppercase;
    vertical-align: middle;
    width: 50%;
}

    .brandCopy p {
        display: block;
        font-size: 16px;
        text-transform: none;
        line-height: 150%;
    }

    .brandCopy .currentPg {
        color: #676767;
        font-weight:bold;
    }

    .brandCopy a:link,
    .brandCopy a:visited {
        color: #4284b8;
        font-weight: bold;
        text-decoration: none;
    }
    
    .brandCopy a:hover {
        color: #959595;
    }
    
    .brandCopy .breadInfo {
        float: right;
        padding-bottom: 5px;
    }

    .brandCopy a img {
        margin: 0 auto;
        margin-bottom: 16px;
        max-width: 442px;
        text-align: center;
    }

    .brandCopy p {
        margin-bottom: 16px;
        overflow: auto;
        text-align: left;
    }

编辑：添加了完整的 CSS。

css margin padding
4个回答
35
投票

好的，所以我认为您已经尝试向具有 

.brandList
属性的 
display: inline
div 添加边距和填充。将其更改为 
display: inline-block
，边距和填充应该可以使用。 （检查：http://tympanus.net/codrops/css_reference/display/）。

5
投票

margin
不适用于内联 HTML 元素。如果要在内联元素上应用边距，则必须通过应用 
display: inline-block
属性将目标元素转换为块级元素。

0
投票
.clearfix::after, .clearfix::before{
  content: "";
  clear: both;
  display: table;
}

如果这些答案都不起作用，请尝试将 

.clearfix
作为类添加到您的 HTML 元素，然后复制粘贴此代码。

0
投票

有时问题是内部元素的宽度与外部元素相同或更大。

设置正确的尺寸通常可以解决问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.