边距/填充不起作用答案

【问题标题】：margin / padding not working边距/填充不起作用
【发布时间】：2015-10-02 00:14:10
【问题描述】：

我在一个主 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。

【问题讨论】：

.brandList { 显示：内联；溢出：自动；文本对齐：居中；垂直对齐：中间；宽度：100%;} .brandCopy .currentPg { 颜色：#676767;字体粗细：粗体； } .brandCopy a:link, .brandCopy a:visited { color: #4284b8;字体粗细：粗体；文字装饰：无； } .brandCopy a:hover { 颜色: #959595; } .brandCopy .breadInfo { 浮动：对；底部填充：5px； } .brandCopy a img { margin: 0 auto;底部边距：16px；最大宽度：442px；文本对齐：居中； } .brandCopy p { margin-bottom: 16px;溢出：自动；文本对齐：左；}
将 CSS 添加到问题中 - 无法从评论中读取它
我感觉缺少一些 HTML。您是否尝试过简化问题？在一个新的 HTML 文件中仅使用两个 div 复制它，看看是否可以查明问题？
我尝试添加css，但它说我的代码太多。
我们需要完整的.css来解决问题。

标签： css margin padding

【解决方案1】：

好的，所以我认为您已尝试将边距和填充添加到具有 display: inline 属性的 .brandList div。将其更改为display: inline-block，边距和填充应该可以工作。（检查：http://tympanus.net/codrops/css_reference/display/）。

【讨论】：

成功了！太感谢了！是什么不允许边距/填充？是因为它正在读取同一行中的第二个 .brandList，因为它是 inline 而不是 inline-block？
酷，我很高兴能帮上忙。请记得点赞并接受我的回答。 '为什么？'在上面链接的 codrops 文章中进行了解释。这是另一个链接：maxdesign.com.au/articles/inline 它会更好地解释它。了解内联元素如何处理宽度、高度、内边距和边距等属性非常重要。
我的代码还有另一个问题。右侧的框的内容触及顶部。我希望它在框内居中。我尝试了 margin-top: 50%，但没有奏效。

【解决方案2】：

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

【讨论】：