Question

我已经在框内摆弄文字一段时间了，我注意到当屏幕调整大小时，框顶部总是添加这个额外的填充，即使它不在代码中。是否有任何提示允许框尺寸在屏幕调整大小时不添加额外的填充？

＆＃13;

* {
    box-sizing: border-box;
}

/* Create three columns of equal width */
.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

/* Style the list */
.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

/* List items */
.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

/* Grey list item */
.price .grey {
    background-color: #eee;
    font-size: 20px;
}

/* The "Sign Up" button */
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}
Try it Yourself »

＆＃13;

<div class="columns">
  <ul class="price">
    <li class="header">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
  </ul>
</div>
<div style="position:relative;">
  <div style="color:#ddd;background-color:#282E34;text-align:center;padding:20px 20px;text-align: justify;">
    <H2 ALIGN="CENTER">PLAN IT</H2><BR>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu </p>
      
  </div>
</div>

＆＃13;

Answer 1

1这是你想要的吗？调整大小后，我没有看到任何填充添加到您的标题中。

第二次尝试不使用内联样式，创建一个类并将样式放入其中。

第3 padding: 20px 20px;（20px上/下，20px左/右）等于padding: 20px;（所有4边为20px）

第4版创建了一个类，以便在HTML5中弃用align="center"之后将其置于中心位置：

参考：https://www.codehelp.co.uk/html/deprecated.html

.centered {
  text-align: center;
}

html,
body {
  margin: 0;
}

.mystyle {
  color: #ddd;
  background-color: #282E34;
  text-align: center;
  padding: 20px;
  text-align: justify;
}

.centered {
  text-align: center;
}

<div style="position:relative;">
  <div class="mystyle">
    <H2 class="centered">PLAN IT</H2>
    <BR>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsu </p>

  </div>
</div>

Answer 2

我不太明白你是什么意思？也许是因为我使用的是Chrome，所以我看不到你看到的内容。所以下面的答案完全基于想象力。抱歉，

您可以使用F12查看样式是否实际上是可以由浏览器添加的默认样式。

要修复它，您可以将Reset CSS或normalize.css引入您的网页，但将它们放在每个其他css文件的前面。

或者只是简单地在你的css的非常开始中规定div {padding:0;margin:0;}

Answer 3

您可以使用外部CSS文件

来完成

创建yourname.css

 <head>
    <link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>

在您的代码中添加<div id="yourpad" </div>
现在简单地编辑yourame.css并放置此代码

.yourpad {padding 0px 0px 0px}

框内问题的简单文本格式

3 个答案: