logo标签列表

边距/内边距无效

cssmarginpadding
18

我在一个主 div 中有 2 个主要的 div。我尝试添加大量的 margin 和 padding 进行测试，但它们都没有生效。为什么我不能在它们之间添加 margin / padding？请帮助。

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已添加。

1
.brandList { 显示: 内联; 溢出: 自动; 文本对齐: 居中; 垂直对齐: 中间; 宽度: 100%; } .brandCopy .currentPg { 颜色: #676767; 字重:粗体; } .brandCopy a:link, .brandCopy a:visited { 颜色: #4284b8; 字重: 粗体; 文本装饰: 无; } .brandCopy a:hover { 颜色: #959595; } .brandCopy .breadInfo { 浮动: 右; 填充底部: 5像素; } .brandCopy a img { 边距: 0自动; 边距底部: 16像素; 最大宽度: 442像素; 文本对齐: 居中; } .brandCopy p { 边距底部: 16像素; 溢出: 自动; 文本对齐: 左对齐;} - Tantalizea Lacaden
3
已添加CSS到问题中-从评论中无法阅读。 - shapiro yaacov
我试图添加CSS，但它说我的代码太多了。 - Tantalizea Lacaden
@somethinghere - 不，还没有。我有一个包含面包屑的div，然后是一个新的div用于一个品牌，里面有两个单独的div，左边是图像，右边是文本。我在这方面算是初中级水平，所以不太确定该怎么做。 - Tantalizea Lacaden
我没有看到 .brandInfo 的 HTML 元素，也没有看到 .brandImg 的 CSS 设置。你具体是想要在哪些 div 上添加 padding 或 margins？ - Wes Foster
显示剩余5条评论
3个回答
31

好的，我认为您试图向具有 display:inline 属性的 .brandList div 添加边距和填充。将其更改为 display:inline-block，然后边距和填充应该可以正常工作。(查看：http://tympanus.net/codrops/css_reference/display/)。

成功了！非常感谢！是什么导致了边距/填充无法生效？是因为它在同一行中读取了第二个.brandList，因为它是内联而不是内联块吗？ - Tantalizea Lacaden
很酷，我很高兴能够帮助。请记得给我的答案点赞并接受。为什么？在上面链接的Codrops文章中有解释。这里还有另一个链接：http://maxdesign.com.au/articles/inline/ 它会更好地解释。理解内联元素如何处理诸如宽度、高度、填充和边距等属性非常重要。 - boszlo
我还有另一个代码问题。右侧的框内容与顶部相接触。我希望它在框内居中。我尝试了margin-top: 50%，但没有效果。 - Tantalizea Lacaden
3

margin 在行内HTML元素上不起作用。如果你想在行内元素上应用margin，那么你必须通过应用 display:inline-block 属性将目标元素转换成块级元素。


最初的回答已经很清楚了，如果你想在行内元素上使用margin，需要把它转换成块级元素。你可以通过设置display:inline-block属性来实现这一点。
0
.clearfix::after, .clearfix::before{
  content: "";
  clear: both;
  display: table;
}

如果以上答案都不起作用，那么请尝试将 .clearfix 添加为 HTML 元素的类，并复制粘贴以下代码。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接