负边距不起作用答案

【问题标题】：Negative margin not working负边距不起作用
【发布时间】：2015-11-29 08:21:29
【问题描述】：

我正在尝试获得负边距以允许我的徽标溢出标题。

预期结果的图像：

显示当前错误结果的图像：

我对 HTML 和 CSS 都非常陌生，尽管我已经尽我所能来玩弄这段代码并试图在网上（包括这个网站）找到答案，但都无济于事。所以这是我与这些部分相关的代码：

#logo {
  display: inline-block;
  margin: -30px 0px -100px 10px;
}
.hheader {
  background-color: #005073;
  background-image: -webkit-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* Standard syntax */
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  /* Standard syntax */
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-bottom: 2em;
  margin-top: 30px;
}

<div class="container">
  <div class="hheader">
    <a id="logo" href="/" title="Return to home">
      <img src="images/logo.png" alt="Density Art Logo">
    </a>
  </div>

如果需要，以下是两者的完整代码：

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Density Art - Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
    <div class="container">
        <div class="hheader">
            <a id="logo" href="/" title="Return to home">
            <img src="images/logo.png" alt="Density Art Logo">
            </a>
        </div>

        <div class="nav_menu">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Website Design</a></li>           
                    <li><a href="#">Art &amp; Poetry</a></li>  
                    <li><a href="#">Blog &amp; Other</a></li>
                    <li><a href="#">Music &amp; More</a></li>
                    <li><a href="#">Shop</a></li>  
                </ul>
            </nav>
        </div> <!-- end of container-->
    </div> <!-- end of navigator menu bar--> 
</header>


    <div id="content">
        <section id="leftcolumn">

            <h1>Home</h1>

            <h3>Who are we?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <h3>What is our aim?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

        </section> <!-- end of left column content-->

        <aside id="rightcolumn">

            <h2>Get Connected!</h2>
            <h5>Join our evergrowing community and become a part of Density Art</h5>

            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/fb.png" alt="Facebook"></a>
            <h4>Facebook</h4>

            <a href="http://www.instagram.com/" target="_blank"><img src="images/btns/ig.png" alt="InstaGram"></a>
            <h4>Instagram</h4>

            <a href="http://www.soundcloud.com/" target="_blank"><img src="images/btns/sc.png" alt="SoundCloud"></a>
            <h4>SoundCloud</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/em.png" alt="Email"></a>
            <h4>Email</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/ph.png" alt="Phone Call"></a>
            <h4>Phone Call</h4>


        </aside> <!--end of right column content-->

    </div> <!-- end of content form-->

<footer>
    <div id="footerbar">

        <p>Copyright &copy; informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah</p>

        <hr>

        <h6>Contact us</h6>
        <h6>Legal Terms</h6>
        <h6>Shopping Cart</h6>
        <h6>Facebook</h6>
        <h6>Instagram</h6>



    </div>


</footer>

</body>
</html>

CSS

html {
-webkit-font-smoothing: antialiased;
text-rendering: optimiszelegibility;   
}


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
color: ebe9e9; 
}

h1, h2 {
font-weight: 700;
margin:0;
line-height: 45px;    
}


h4, h6  {
font-weight: bold;
margin: 5px 0 5px 0;    
}

h1 {
font-size:48px;
}

h2 {
font-size:30px;
}

h3 {
font-size:24px;
font-weight: bold;
}

h4 {
font-size:20px;
line-height: 45px;
}

h5 {
font-size:16px;
font-weight: 600;
margin:0;
line-height: 45px; 
}

h6 {
font-size:12px;
line-height: 20px;
}

p {
margin: 0 0 10px 0;

}

nav ul li{
display: inline;
}

#logo {
display:inline-block;
margin: -30px 0px -100px 10px;
}

.hheader {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,60,80,.8) 0%,        rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8)  50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
border-style: solid;
border-width: 1px;
border-color: black;
margin-bottom: 2em;
margin-top: 30px;
}

.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}

.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);  /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
max-height: 2em
}

如果任何善良的成员具备所需的知识和能力来帮助我，那么请输入一个适合初学者的回复。

这是代码的 JSFiddle：https://jsfiddle.net/7hb9bd58/2/

【问题讨论】：

你能用代码创建一个jsfiddle.net 并将链接添加到你的问题中吗？
感谢您的编辑建议和评论，这是我在这里的第一篇文章，所以我仍在努力解决这个问题。在底部添加了 jsfiddle。
尝试设置位置 (top: -10px;)
非常感谢大家的帮助 - 最后一件事是，我如何将此问题标记为已回答？或者这不是这个网站上的一个选项？我在游览或帮助部分找不到答案。再次感谢你们所有非常友善的成员！除了今天表现出的耐心和友善的态度之外，响应速度给我留下了深刻的印象。
我们很乐意提供帮助！ - 小提琴只是加快速度（帮助我们，帮助你:)） - 欢迎来到 StackOverflow ！！！以后记得阅读我们的How to Ask 页面，以获取有关如何提出重要问题的提示...

标签： html css margin

【解决方案1】：

.hhheader 的高度没有改变，因为#logo 上的边距不会影响标题大小（取决于徽标的大小），您只是在移动#logo，仅此而已。

你有什么理由不直接设置.hheader 元素的高度。类似的东西

height: 190px;

https://jsfiddle.net/7hb9bd58/4/

或者，如果由于某种原因不允许这样做，也许你可以缩放徽标，它会出现溢出标题容器

#logo {
    display:inline-block;
    transform: scale(1.3);
    margin-left:50px;
}

https://jsfiddle.net/7hb9bd58/5/

【讨论】：

不，我考虑过它，尽管按照我用来学习 ATM 的教程，我认为它们是关于扩展的一个原因，为什么这是一个坏主意。尽管您似乎绝对了解您的东西，所以我非常感谢您的两个回答。这两个想法都很棒，并且已经教会了我新功能。

【解决方案2】：

将徽标的位置设置为绝对位置

#logo {
    display:inline-block;
    position:absolute;
    margin: -30px 0px -100px 10px;
}

这将从流中删除图像，因此不再强制 .hheader 的高度包含它。要进行补偿，请指定 hheader 的高度。（我用的是190px，你可以微调）

.hheader {
    height:190px;
/* rest of css */
}

https://jsfiddle.net/7hb9bd58/6/

【讨论】：

【解决方案3】：

在css中进行更改，根据需要更改高度

    .hheader {
      height:265px;
    }
 #logo {
    display: block;
    margin: 2px 0px -100px 10px;
    float: left;
}

【讨论】：