Question

我试图在标题的底部和文本本身之间给出日期15px的边距，但无论我尝试什么，它都不会移动。

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <script src="myscripts.js"></script>
    <title>The Impertus · Understand the News</title>
</head>

<body>
    <div id="Preheader">
        <img src="images/masthead.png">
        <div class ="ph" id="hd"></div>
        <p class="ph">May 14, 2016</p>
    </div>
</body>
</html>

CSS：

@import url('https://fonts.googleapis.com/css?family=Oswald');

html, body {
    background-color: #E1D4C0;
    margin: 0 0 0 0;
}

.ph {
    display: inline-block;
    margin-bottom: 15px;
}

#Preheader {
    height: 150px;
    width:100%;
    background-color: #104386;
    font-family: Oswald;
    color: #F5EDE3;
}

在此创建小提琴：https://jsfiddle.net/fhkh6ae0/

Answer 1

添加.ph { vertical-align:15px; }

请参阅https://jsfiddle.net/fhkh6ae0/2/

Answer 2

尝试

.ph {
    padding-bottom: 15px;
}

Answer 3

只需在#Preheader中添加填充即可。看看https://jsfiddle.net/fhkh6ae0/3/

#Preheader {
    height: 150px;
    width:100%;
    background-color: #104386;
    font-family: Oswald;
    color: #F5EDE3;
  padding-bottom:15px; /*added*/
}

Answer 4

我认为你的问题在于你的html元素显示属性。

我发现你在 .ph 类中使用它：

display: inline-block;

为了让你的元素彼此相邻，但我认为你可以通过在 #hd 和 .ph 要素：

float: left;

以下是CSS-Tricks的 CSS Floats 的详细信息。在许多特定情况下，您使用的方法可能是一件好事，但对于您的具体情况，我认为这是正确的方法。

以下是Fiddle。

你可以看到我改变了一些东西，我添加了新的东西。一个是我上面引用的float属性，我在主容器overflow: hidden中添加了一个#Preheader属性，这是一个浮动元素的修复，试图逃避它们的位置或破坏你的布局。记住最后一个。

无法在div中移动文本

4 个答案:

以下是Fiddle。