当使用margin或padding时，文本不会相应地进行边距调整？

Question

我是一名Photoshop设计师，不是Web开发人员。我试图制作一个漂亮的列表样式来添加到我的个人WordPress博客中。我从Material Design中获得了灵感，设计效果非常好，如下图所示。

所以我决定尝试创建一个HTML和CSS设计，最终看起来像这样。

我尝试给文本添加一些边距和填充，但似乎无法将内容文本向右移动。我该怎么做才能修复这个问题？

HTML 代码：

  <div>
  <ul>
    <li class="paper">
      <div class="papercontent">
      <img class="pimg" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2014/12/oneplus-one-top10.png" alt="oneplus-one-top10" width="452" height="300"  />
      <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
      <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
      </div>
 </li>

除了WordPress文章CSS之外，我的自定义CSS-

.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
}
.ptext
{
  margin-right: .1em;
  margin-left: .1em;
  font-size: 0.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
max-width: 100%;
  float: left;
height: auto;
}

如果我的方法有误，请指出正确的方法。谢谢。

- user3947353

---

您不希望文本框的高度与图像相同吗？ - webkit

@webkit 是的，我想要那个。我该怎么做？ - user3947353

如果您事先知道图像的高度（以像素为单位），只需将该高度提供给文本框即可。如果不知道，我建议使用背景图像而不是内联img，将其与您的文本框具有相同的相对（％）或固定（px）高度，并且背景图像将裁剪到大小。或者查找background-size，如果需要进一步帮助，请告诉我。祝你好运。 - webkit

@webkit 在响应式布局中，如何设置文本框图像的高度？我尝试过设置高度，但在较小的屏幕尺寸上，文本会溢出。 - user3947353

对于响应式设计，它取决于你想如何处理文本..例如，你可以将其放在内部容器中，并且为其添加overflow-y:auto以使在文本框过小时出现滚动条。 - webkit

Answer 1

.pimg {
max-width: 100%;
float: left;
height: auto;
margin-right: 20px; /* add */
}

工作演示 http://jsfiddle.net/aavk7g9m/2/

- Alien

Answer 2

尝试将此添加到您的CSS中。

.ptext{
padding-left:10px;
}

- Cisum Inas

---

你想要添加填充(padding)，而不是边距(margin)，以便使你的盒子之间不会移动。在这里可以了解更多有关padding和margin的区别：https://dev59.com/d3I95IYBdhLWcg3wtwRe 。Margin是元素的外部, 而Padding是元素的内部。 - Nathaniel Flick

Answer 3

看看我的PEN 我个人喜欢在元素内部分隔区域，以便更精细地控制。在这种情况下，我已经将您的照片和文本包装在两个单独的div中，以便它们可以并排浮动。

我已经为所有元素添加了box-sizing: border-box，以便您可以填充文本（因为填充是添加在元素边框内部的），而不会影响列表项的宽度/布局 - 如果您想要像60% + 40% = 100%这样的宽度，您应该使用此选项。如果没有这个选项，填充将被添加到外面，从而破坏您的布局，因为您的div将不再等于100%。

HTML：

 <div id="main">
     <ul>
         <li class="paper">
             <div class="papercontent">
                 <div class="inner first">
                     <img class="pimg" src="http://placekitten.com/g/350/350" alt="oneplus-one-top10" />
                 </div>
                 <div class="inner second">
                     <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
                     <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
                 </div>

             </div>
         </li>
     </ul>
</div>

CSS：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#main {
    display: block;
    margin: auto;
    max-width: 830px;
}
ul {
    margin: 0;
    padding: 0;
}
.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
    margin: 0;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
    float: left;
}
.ptext
{
  font-size: 0.8em;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
    max-width: 100%;
    float: left;
    height: auto;
}
.inner {
    float: left;
}
.inner.first {
    width: 40%;
}
.inner.second {
    width: 60%;
    padding: 16px;
}

- Morgan Feeney

---

感谢您进行更好的实现！ - user3947353

在我的先前实现中，当我减小屏幕宽度时，我的布局会变成这样- http://i.stack.imgur.com/eHSW3.png 但是现在的当前实现会变成这样- http://i.stack.imgur.com/LAKBJ.png 我如何在较小的屏幕宽度下实现先前的行为？这可能吗？ - user3947353

不用了！这段文字与我设置的 CSS 对齐得很好！ - user3947353

在您的第一个示例中，没有段落，只有标题。 - Morgan Feeney

既然你坚持要看这段话，那么我在问题中提供的CSS代码在我的WordPress布局中实现了以下效果- http://i.imgur.com/iBz5c7q.png - user3947353

Answer 4

jsfiddle示例：jsfiddle.net/aavk7g9m/（SO不允许我在没有代码的情况下放置链接，而我没有任何要展示的...）

我想这里可以工作吗？我猜这是（WordPress）上下文的问题吗？

- sodawillow

---

图片和右侧文本之间不适用边距。我该如何添加一些间距？ - user3947353