我有一个基本的HTML,显示广播中使用的安全区域。但是,当我向我设置的div添加文本时,它会使对齐不合适。
代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="browserClock.css">
</head>
<body>
<div id="safeAction">Safe Action Area
<div id="safeText">Safe Text Area
</div>
</div>
</body>
</html>
html {
width: 1920px;
height: 1080px;
margin: 0;
padding: 0;
background-color: black;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 16px 28px 16px 28px;
border: 1px dotted white;
}
没有文本,它按照EBU标准像素间距排列。有了文字,它没有。
答案 0 :(得分:0)
这种情况正在发生,因为标识为safeText
的内部div相对于其所在的div的其他内容而定位。要解决此问题,请将safeText
的位置设置为绝对并使用{{ 1}}设置从内部div的顶部到外部div的顶部(在您的情况下为16px)而不是顶部边距的距离。最后,给予身体相对定位,以便确定父母。
top