CSS 定位问题：无效的属性值答案

【问题标题】：CSS positioning issues: invalid property valueCSS 定位问题：无效的属性值
【发布时间】：2017-03-22 05:16:37
【问题描述】：

我有一些非常简单的 HTML/CSS 代码，无论我做什么，我总是得到 chrome 的“无效属性值”异常，并且 logo 无法正确定位。

修复了第一个问题，但现在图像没有移动相关的边框。

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>my website</title>
    <style type="text/css">

        *{ padding: 0; margin: 0; }

        .header {
            width: 100%;
            height: 100px;
            border: none;
            border-bottom-style: solid;
            border-bottom-width: 5px;
            position: relative;
            border-bottom-color: rgb(220,30,60);
        }

        .logo {          
            position: absolute;
            padding-bottom:50px;
            height: 150%;
            width: auto;                
        }    
      
    </style>        
</head>

<body>
    <div class="header" id="header">
        <img id="logo" class="logo"  src="image.png"/>
    </div>
</body>
</html>

【问题讨论】：

50 px 应该是50px。
是的，已修复，但现在 img 不会移动到与底部边框相关的位置。我想，填充设置距离到 div 的边界？
@tagduck 看看我的回答。 stackoverflow.com/a/40489435/1076753
您应该使用当前版本编辑您的问题，以及您还缺少什么。如果是两个单独的问题，则应在两个单独的帖子中提出。这个应该关闭，因为一个错字对任何人都没有帮助。
1.适当地？我不知道你想做什么。 2.添加一个JSfiddle。

标签： html css position padding

【解决方案1】：

我遇到了类似的问题。

我写了10（而不是10px），这解决了问题。

【讨论】：

【解决方案2】：

我只是不明白为什么在这种情况下您使用 padding-bottom 而不是 bottom。无论如何：

   <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>my website</title>
        <style type="text/css">
             *{ padding: 0; margin: 0; } 
            .header {
                position: relative;
                height: 100px;
                border-bottom: 5px solid rgb(220,30,60);
            }
            .logo {
                position: absolute;
                bottom:50px;
                height: 150%;
                width: auto;
            }
        </style>
    </head>
    <body>
     <div class="header" id="header">
        <img id="logo" class="logo"  src="image.png"/>
     </div>
    </body>
    </html>

CSS 底部属性：http://www.w3schools.com/cssref/pr_pos_bottom.asp

CSS padding-bottom 属性：http://www.w3schools.com/cssref/pr_padding-bottom.asp

【讨论】：

谢谢，底部对我有用。为什么我不应该使用 padding-bottom？
因为 padding 和 position 是两个不同的属性。

【解决方案3】：

如果您在 css 中使用单引号，请从 css 文件中删除单引号。

举例

// Wrong
.row{
    margin-left:'-16px !important';
    margin-right:'0px !important';
}

// Right
.row{
    margin-left:-16px !important;
    margin-right:0px !important;
}

【讨论】：

【解决方案4】：

padding-bottom:50 px; 中的px 之前有一个空格。修复：

padding-bottom: 50px;

【讨论】：