Question

所以我想和Sass混在一起，所以我创造了这个非常简单的小页面。由于我在向#content添加上边距时未知的原因，它会影响我的包装div。任何关于为什么会发生这种情况的信息将不胜感激。谢谢！

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />



<title>YO</title>

</head>

<body>

<div id="wrapper">

<div id="content">

<div class="dog">
Bury me with my money
</div>

</div>






</div>
</body>
</html>

萨斯

html body
    background-color: #000
    padding: 0
    margin: 0
    height: 100%

#wrapper
    background-color: #fff
    width: 900px
    height: 700px
    margin: 0 auto

#content
    width: 500px
    margin: 150px 0 0 50px  

.dog
    color: #FF3836
    font-size: 25px
    text-shadow: 2px 2px 2px #000
    width: 500px
    height: 500px
    -moz-border-radius: 5px
    -webkit-border-radius: 5px
    border: 18px solid #FF3836

Sass吐出的Css

html body { background-color: #000; padding: 0; margin: 0; height: 100%; }

#wrapper { background-color: #fff; width: 900px; height: 700px; margin: 0 auto; }

#content { width: 500px; margin: 150px 0 0 50px; }

.dog { color: #FF3836; font-size: 25px; text-shadow: 2px 2px 2px #000; width: 500px; height: 500px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 18px solid #FF3836; }

Answer 1

你已经正确地完成了这件事。你遗漏的是float: left。将您的行更改为：

#content { width: 500px; margin: 150px 0 0 50px; float: left; }

css格式化问题

1 个答案: