Question

我认为var message是很久以前父元素和它自身之间的空间。但我认为这不是真的。请使用CSS查看以下简短HTML。

margin

您将看到以下屏幕截图的输出。

我的<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Box Model</title> <style type="text/css"> body { background-color: #ccc; } header { text-align: center; text-decoration: underline; font-weight: bold; } #container { background-color: grey; width : 400px; height : 400px; } #container .box { background-color: slategrey; width : 200px; height : 200px; color : #fff; border: 5px solid navy; margin-top: 50px; margin-left:50px; padding-top:20px; padding-left:20px; } </style> </head> <body> <header>Box Model Example</header> <section> <div id="container"> <div class="box">Content</div> </div> </section> </body> </html>不是父元素容器和元素框之间的空格。我怎么能在这两个元素之间添加空间（从上面）？

Answer 1

你对什么是保证金并没有错。我认为你的实际问题是＆＃34;为什么margin-top在这里不起作用？＆＃34;。

如果我没有弄错，这是collapsing margins的情况：在某些情况下，两个元素的垂直边距会合并。（注意你的示例中的上边距是怎样的，它只是在外框上。）

您可以尝试其中提到的解决方案之一（例如，浮动内框），或者在外框中添加填充。

Answer 2

你的代码是正确的。

但您需要将这些行添加到#container＆amp; #container .box classes。

display:inline-block;
position:relative;

详细了解展示广告位置：http://www.w3schools.com

你的最终代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
    body {
    background-color: #ccc;
    }
    header {
        text-align: center;
        text-decoration: underline;
        font-weight: bold;
    }
    #container {
        background-color: grey;
        width : 400px;
        height : 400px;
        display:inline-block;
        position:relative;
    }
    #container .box {
        background-color: slategrey;
        width : 200px;
        height : 200px; 
        display:inline-block;
        position:relative;
        color : #fff;   
        border: 5px solid navy;
        margin-top:50px;
        margin-left:50px;
        padding-top:20px;
        padding-left:20px;
    }
</style>
</head>
<body>
    <header>Box Model Example</header>
    <section>
        <div id="container">
            <div class="box">Content</div>
        </div>
    </section>
</body>
</html>

Answer 3

define cron::job (
  $url,
  $time_offset,
) {
  $minute = 5 + $time_offset
  cron { "cron ${name}":
    ensure  => present,
    command => "wget -O - --save-cookies cookies.txt --load-cookies cookies.txt --keep-session-cookies  https://${url}/ >/dev/null 2>/dev/null",
    user    => 'housekeeper',
    minute  => "*/${minute}",
    require => User['housekeeper'],
  }
}

user { 'housekeeper':
  ensure => present,
}

cron::job { 'job1':
  url => 'http://example1.com',
  time_offset => 10,
}
cron::job { 'job2':
  url => 'http://example2.com',
  time_offset => 15,
}

Answer 4

将padding-top添加到#container：

#container { padding-top: 50px;}

CSS中的保证金是多少？

4 个答案: