【问题标题】:css 中的 <div> 可以留边距吗?
【发布时间】:2011-05-11 00:10:01
【问题描述】:

是否可以为文本区域定义边距?

我的所见即所得编辑器将我的文本放在 &lt;div&gt; 标记中,而不是给换行符 &lt;br /&gt;

所以我想给&lt;div&gt; 留余地?

这在 css 中可能吗?如果是的话怎么做?

非常感谢。

编辑:我无法定义 div,因为它没有类。 例如编辑器使它:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas lacus libero, et pellentesque nisl. Cras pharetra nunc sit amet urna vestibulum non ultricies metus malesuada. </div>
<div>Nulla tincidunt, neque at blandit ultrices, massa odio pulvinar est, vel accumsan sapien justo sit amet lorem.</div>

这看起来像:

Lorem ipsum dolor sit amet,consectetur adipiscing elit。 Vestibulum egestas lacus libero, et pellentesque nisl。 Cras pharetra nunc 坐 amet urna 前庭非 ultricies metus malesuada。
Nulla tincidunt, neque at blandit ultrices, massa odio pulvinar est, vel accumsan sapien justo sit amet lorem。

但必须是这样的:

Lorem ipsum dolor sit amet,consectetur adipiscing elit。 Vestibulum egestas lacus libero, et pellentesque nisl。 Cras pharetra nunc sit amet urna vestibulum non ultricies metus malesuada。

Nulla tincidunt,neque at blandit ultrices,massa odio pulvinar est,vel accumsan sapien justo sit amet lorem。

【问题讨论】:

    标签: html css xhtml


    【解决方案1】:

    喜欢:

    div.myDiv{
      margin: 10px 0px 5px 20px;
    }
    

    为您提供:顶部 10 像素边距、右侧 0 像素边距、底部 5 像素边距和左侧 20 像素边距。

    【讨论】:

    • 重要的人会掌握这种简单的速记,因为它也适用于填充。
    【解决方案2】:
    <div style="margin:5px;">content</div>
    

    ... 将在 div 上放置 5 像素的边距。

    【讨论】:

      【解决方案3】:

      &lt;p&gt; 已经默认在顶部和底部有一个 1em 边距。我通常使用&lt;p&gt;test&lt;/p&gt; 在文本上放置换行符而不是&lt;br /&gt;

      您可以在单独的 .css 文件中的所有 div 上放置 1em 顶部和底部边距,如下所示:

      div{
        margin:1em 0; /* 1em top & bottom; 0em sides */
      }
      

      你不想像有人建议的那样使用内联 CSS:

      &lt;div style="margin:1em 0;"&gt;text&lt;/div&gt;

      因为您使用的是所见即所得,它不会自动将其放入。另外,您必须在所有 div 上添加额外的 style="" 属性。

      需要注意的一个有趣概念是边距垂直折叠,而不是水平折叠。这意味着如果您在顶部和底部有 1em 边距,那么您的段落之间不会有 2em 边距。你会得到更理想的1em 边距。

      W3C CSS specification: Box model

      在 CSS 2.1 中,水平边距永远不会塌陷。

      某些框之间的垂直边距可能会折叠:

      • 正常流折叠中块框的两个或多个相邻垂直边距

      【讨论】:

      • -1。我不确定您使用的是什么浏览器,但我最近使用的每个浏览器在 &lt;div&gt; 标签上都没有默认边距。您是否将&lt;div&gt;&lt;p&gt; 混淆了?
      • 不,它真的是一个
        。 SLaks 为我指明了正确的方向
      【解决方案4】:

      你可以通过写来改变容器中所有&lt;div&gt;s的边距

      .MyContainer div {
          margin: 42px;
      }
      

      【讨论】:

      • 这正是我正在寻找的答案。现在工作正常。谢谢!
      • 我怀疑你想要margin:42px; 我想你想要margin:42px 0;!!
      • @JohnB:他可能根本不想要 42px。 42px 是一个很大的差距。
      • 保证金:1em 0;看起来不错:)
      • 我同意,你的例子不是我的。
      猜你喜欢
      • 1970-01-01
      • 2012-02-28
      • 2018-03-09
      • 1970-01-01
      • 1970-01-01
      • 2014-03-24
      • 2011-04-04
      • 1970-01-01
      • 2014-04-08
      相关资源
      最近更新 更多