div标签的保证金问题

时间：2018-05-07 10:44:11

标签： html css

我正在尝试使用“Wrapper”类的div标签从所有方面都有一些像素的边距，尤其是从侧边栏，但边距只是从顶部和底部增加，为什么它如此？

2.当我使用悬停样式进行链接时，只有整个标签的一部分正在改变颜色，为什么会这样呢？

请帮忙。

Ps： - 我只是一个初学者我很抱歉，如果我的问题过于愚蠢或愚蠢。 

body {
  margin: 0px;
  padding: 0px;
}

.head {
  background-color: lightgrey;
  overflow: auto;
  margin: 0px;
  padding: 0px;
}

.head h1 {
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 5px solid black;
}

.head h4 {
  text-align: center;
  border-bottom: 3px solid black;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

.col {
  background-image: url(tony-webster-97532-unsplash.jpg);
  overflow: auto;
  border-bottom: 2px solid black;
}

.col h1 {
  padding-top: 160px;
  padding-bottom: 160px;
  color: white;
  text-align: center;
}

.sidebar {
  float: left;
  overflow: auto;
}

.sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  border-right: 2px solid grey;
}

.sidebar li {
  background-color: lightgrey;
  text-align: center;
  color: black;
  padding: 15px 30px;
  border-bottom: 1px solid black;
}

.sidebar a {
  text-decoration: none;
  color: black;
  padding: 15px 45px;
}

.sidebar li a:hover {
  background-color: grey;
}

.nav {
  display: block;
  overflow: auto;
  background-color: lightgrey;
  border-bottom: 2px solid grey;
}

.nav ul {
  list-style-type: none;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
}

.nav li {
  float: left;
  margin: 0px;
  padding: 10px 0px;
}

.nav a {
  text-decoration: none;
  color: black;
  padding: 10px 16px;
}

.nav a:hover {
  background-color: grey;
}

.advert {
  float: right;
  border-left: 1px solid grey;
  background-color: lightgrey;
}

.advert h3 {
  padding-top: 265px;
  padding-bottom: 265px;
}

.wrapper {
  border: 1px solid black;
  margin: 40px 20px;
  overflow: hidden;
  padding-left: 30px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Happening.</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="head">
    <h1>Happening.</h1>
    <h4>Your Name</h4>

  </div>
  <div class="col">
    <h1>College image in the backgroud</h1>

  </div>
  <div class="sidebar">
    <ul>
      <li>
        <h1>#Trending</h1>
      </li>
      <li><a href="#">Trending 1</a></li>
      <li><a href="#">Trending 2</a></li>
      <li><a href="#">Trending 3</a></li>
      <li><a href="#">Trending 4</a></li>
      <li><a href="#">Trending 5</a></li>
      <li><a href="#">Trending 6</a></li>
      <li><a href="#">Trending 7</a></li>
      <li><a href="#">Trending 8</a></li>
      <li><a href="#">Trending 9</a></li>
      <li><a href="#">Trending 10</a></li>
      <li><a href="#">Trending 11</a></li>
    </ul>
  </div>
  <div class="advert">
    <h3>This is the place for adverts</h3>
  </div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Hiring</a></li>
      <li><a href="#">Interships</a></li>
      <li><a href="#">Collegues</a></li>
    </ul>
  </div>
  <div class="feed">
    <div class="wrapper">
      <div class="post">
        <img src="tony-webster-97532-unsplash.jpg" height="50" width="50">
        <h4>Placement Officer &#10004;</h4>
        <p>Some message from the authority</p>
      </div>
    </div>
  </div>
</body>

</html>

6 个答案:

答案 0 :(得分：1)

1）使用填充而不是边距。 （for .wrapper .post）
2）添加属性display：block（用于标记）。

＆＃13;
＆＃13; 
body {
  margin: 0px;
  padding: 0px;
}

.head {
  background-color: lightgrey;
  overflow: auto;
  margin: 0px;
  padding: 0px;
}

.head h1 {
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 5px solid black;
}

.head h4 {
  text-align: center;
  border-bottom: 3px solid black;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

.col {
  background-image: url(tony-webster-97532-unsplash.jpg);
  overflow: auto;
  border-bottom: 2px solid black;
}

.col h1 {
  padding-top: 160px;
  padding-bottom: 160px;
  color: white;
  text-align: center;
}

.sidebar {
  float: left;
  overflow: auto;
}

.sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  border-right: 2px solid grey;
}

.sidebar li {
  background-color: lightgrey;
  text-align: center;
  color: black;
  padding: 15px 30px;
  border-bottom: 1px solid black;
}

.sidebar a {
  text-decoration: none;
  color: black;
  padding: 15px 45px;
}

.sidebar li a:hover {
  background-color: grey;
}

.nav {
  display: block;
  overflow: auto;
  background-color: lightgrey;
  border-bottom: 2px solid grey;
}

.nav ul {
  list-style-type: none;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
}

.nav li {
  float: left;
  margin: 0px;
  padding: 10px 0px;
}

.nav a {
  text-decoration: none;
  color: black;
  padding: 10px 16px;
}

.nav a:hover {
  background-color: grey;
}

.advert {
  float: right;
  border-left: 1px solid grey;
  background-color: lightgrey;
}

.advert h3 {
  padding-top: 265px;
  padding-bottom: 265px;
}

.wrapper {
  border: 1px solid black;
  margin: 40px 20px;
  overflow: hidden;
  padding-left: 30px;
}

/* =====================================
 * this is my code
 * ====================================*/
.sidebar li{
    padding: 0;
}
.sidebar li h1{
    margin: 0;
    padding: 15px 10px;
}
.sidebar li a{
    display: block;
}
.wrapper{
    border: none;
    margin: 0;
    padding-left: 0;
}
.wrapper .post{
    border: 1px solid #000;
    margin: 40px 20px;
    padding: 15px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Happening.</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="head">
    <h1>Happening.</h1>
    <h4>Your Name</h4>

  </div>
  <div class="col">
    <h1>College image in the backgroud</h1>

  </div>
  <div class="sidebar">
    <ul>
      <li>
        <h1>#Trending</h1>
      </li>
      <li><a href="#">Trending 1</a></li>
      <li><a href="#">Trending 2</a></li>
      <li><a href="#">Trending 3</a></li>
      <li><a href="#">Trending 4</a></li>
      <li><a href="#">Trending 5</a></li>
      <li><a href="#">Trending 6</a></li>
      <li><a href="#">Trending 7</a></li>
      <li><a href="#">Trending 8</a></li>
      <li><a href="#">Trending 9</a></li>
      <li><a href="#">Trending 10</a></li>
      <li><a href="#">Trending 11</a></li>
    </ul>
  </div>
  <div class="advert">
    <h3>This is the place for adverts</h3>
  </div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Hiring</a></li>
      <li><a href="#">Interships</a></li>
      <li><a href="#">Collegues</a></li>
    </ul>
  </div>
  <div class="feed">
    <div class="wrapper">
      <div class="post">
        <img src="tony-webster-97532-unsplash.jpg" height="50" width="50">
        <h4>Placement Officer &#10004;</h4>
        <p>Some message from the authority</p>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

第一次 update t set [owning_project] = (select top 1 [project] from Products t2 where t2.product_id = t.product_id and t2.[project] is not null ) from Products t 无法使用margin进行设置，因此我使用float代替padding的原因。
第二次您必须将margin更改为:hover而不是li 

a
body {
  margin: 0px;
  padding: 0px;
}

.head {
  background-color: lightgrey;
  overflow: auto;
  margin: 0px;
  padding: 0px;
}

.head h1 {
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 5px solid black;
}

.head h4 {
  text-align: center;
  border-bottom: 3px solid black;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

.col {
  background-image: url(tony-webster-97532-unsplash.jpg);
  overflow: auto;
  border-bottom: 2px solid black;
}

.col h1 {
  padding-top: 160px;
  padding-bottom: 160px;
  color: white;
  text-align: center;
}

.sidebar {
  float: left;
  overflow: auto;
}

.sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  border-right: 2px solid grey;
}

.sidebar li {
  background-color: lightgrey;
  text-align: center;
  color: black;
  padding: 15px 30px;
  border-bottom: 1px solid black;
}

.sidebar a {
  text-decoration: none;
  color: black;
  padding: 15px 45px;
}

.sidebar li:hover{
  background-color: grey;
}

.nav {
  display: block;
  overflow: auto;
  background-color: lightgrey;
  border-bottom: 2px solid grey;
}

.nav ul {
  list-style-type: none;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
}

.nav li {
  float: left;
  margin: 0px;
  padding: 10px 0px;
}

.nav a {
  text-decoration: none;
  color: black;
  padding: 10px 16px;
}

.nav a:hover {
  background-color: grey;
}

.advert {
  float: right;
  border-left: 1px solid grey;
  background-color: lightgrey;
}

.advert h3 {
  padding-top: 265px;
  padding-bottom: 265px;
}

.wrapper {
  border: 1px solid black;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
  overflow: hidden;
  padding-left: 30px;
}

答案 2 :(得分：0)

首先，在Float: left类

中添加.wrapper后，它对我有用

其次，您可以尝试为CSS文件添加以下内容：

.sidebar li:hover {
  background-color: grey;
}

答案 3 :(得分：0)

根据你的代码，封装器的顶部和底部为40px，左右为20px。

相反，你给出如下的内容。

.wrapper {
  margin-left: 40px;
  margin-right: 20px;
}

注意：根据您的要求更改 margin-left 和 margin-right 。

要修复侧边栏按钮悬停问题，请将其设为块元素。

.sidebar ul li a {
  display: block;
}

将{em> background-color 提供给包裹<li>的{​​{1}}并不好。因为，您无法点击整个区域。

答案 4 :(得分：0)

有很多方法可以解决它， 这个会做：

第一期

将* {box-sizing: border-box;}添加到您的CSS中，您可以阅读更多相关信息here。

然后，如果您的网站是静态的，请为.feed，.sidebar和。advert添加固定宽度，如果您愿意，如果您的网站也可以使用百分比而不是固定宽度响应（在任何屏幕宽度上工作）。 还为float: left添加.feed，因为其他元素已浮动。

第二期

而不是.sidebar li a:hover {background-color: grey;}使其成为.sidebar li:hover {background-color: grey;}。

检查下面编辑的代码段：

* {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
}

.head {
  background-color: lightgrey;
  overflow: auto;
  margin: 0px;
  padding: 0px;
}

.head h1 {
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 5px solid black;
}

.head h4 {
  text-align: center;
  border-bottom: 3px solid black;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

.col {
  background-image: url(tony-webster-97532-unsplash.jpg);
  overflow: auto;
  border-bottom: 2px solid black;
}

.col h1 {
  padding-top: 160px;
  padding-bottom: 160px;
  color: white;
  text-align: center;
}

.sidebar {
  float: left;
  overflow: auto;
width: 20%;
}

.sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  border-right: 2px solid grey;
}

.sidebar li {
  background-color: lightgrey;
  text-align: center;
  color: black;
  padding: 15px 30px;
  border-bottom: 1px solid black;
}

.sidebar a {
  text-decoration: none;
  color: black;
  padding: 15px 45px;
}

.sidebar li a:hover {
  background-color: grey;
}

.nav {
  display: block;
  overflow: auto;
  background-color: lightgrey;
  border-bottom: 2px solid grey;
}

.nav ul {
  list-style-type: none;
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
}

.nav li {
  float: left;
  margin: 0px;
  padding: 10px 0px;
}

.nav a {
  text-decoration: none;
  color: black;
  padding: 10px 16px;
}

.nav a:hover {
  background-color: grey;
}

.advert {
  float: right;
  border-left: 1px solid grey;
  background-color: lightgrey;
width: 20%;
}

.advert h3 {
  padding-top: 265px;
  padding-bottom: 265px;
}

.wrapper {
  border: 1px solid black;
  margin: 40px 20px;
  overflow: hidden;
  padding-left: 30px;

}
.feed {
  width: 60%;
 float: left;
}
<!DOCTYPE html>
<html>

<head>
  <title>Happening.</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="head">
    <h1>Happening.</h1>
    <h4>Your Name</h4>

  </div>
  <div class="col">
    <h1>College image in the backgroud</h1>

  </div>
  <div class="sidebar">
    <ul>
      <li>
        <h1>#Trending</h1>
      </li>
      <li><a href="#">Trending 1</a></li>
      <li><a href="#">Trending 2</a></li>
      <li><a href="#">Trending 3</a></li>
      <li><a href="#">Trending 4</a></li>
      <li><a href="#">Trending 5</a></li>
      <li><a href="#">Trending 6</a></li>
      <li><a href="#">Trending 7</a></li>
      <li><a href="#">Trending 8</a></li>
      <li><a href="#">Trending 9</a></li>
      <li><a href="#">Trending 10</a></li>
      <li><a href="#">Trending 11</a></li>
    </ul>
  </div>
  <div class="advert">
    <h3>This is the place for adverts</h3>
  </div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Hiring</a></li>
      <li><a href="#">Interships</a></li>
      <li><a href="#">Collegues</a></li>
    </ul>
  </div>
  <div class="feed">
    <div class="wrapper">
      <div class="post">
        <img src="tony-webster-97532-unsplash.jpg" height="50" width="50">
        <h4>Placement Officer &#10004;</h4>
        <p>Some message from the authority</p>
      </div>
    </div>
  </div>
</body>

</html>

答案 5 :(得分：0)

首先我已将固定宽度230px添加到侧边栏和广告中，并且我已将Feed的左右边距添加到230px。现在包装器将正常工作。请尝试

.feed{
  margin-left: 230px;
  margin-right: 230px;
}
.sidebar {
  float: left;
  overflow: auto;
  width: 230px;
}
.advert {
  float: right;
  border-left: 1px solid grey;
  background-color: lightgrey;
  width: 230px;
}

第二次你必须改变：hover to li而不是a 

.sidebar li:hover {
background-color: grey;
}
相关问题
最新问题