个人中心
gpt4 book ai didi

html - div标签的边距问题

转载 作者：行者123 更新时间：2023-11-28 15:00:43 25 4
gpt4 key购买 nike

我正在尝试使类为“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>

最佳答案

1) 使用 padding 而不是 margin。 (对于 .wrapper .post)
2)添加属性显示: block (用于标签)。

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;
}
<!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>

关于html - div标签的边距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50212333/

25 4 0
文章推荐： ios - UIView 高度变化未反射(reflect)在 UI 中
文章推荐： css - SVG 背景图像缩放问题
文章推荐： html - CSS网格动态列数可能吗？
文章推荐： javascript - 如何使用选择器返回父级？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com