为什么 p 标签会压低父级 div？

Question

我有两个 div 各占屏幕的一半。当我在第二个 div 中添加 p 标签时，它会将其拉下。为什么会这样？我创建了一个 html 电子邮件，所以我只能使用内联样式，不能使用网格系统引用外部样式表。

这里有一个例子：https://jsfiddle.net/jzcxhp2L/1/

<div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;"></div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;">
    <p>Lorem ipsum dolor</p>
  </div>
</div>

Answer 1

只需向它们添加 float:left; 并添加您想要的 margin 值。

    <div>
        <div style="display: inline-block; float: left; margin: 5px; width: 49%; height: 300px; border: 1px solid black;"></div>
        <div style="display: inline-block;float: left;margin: 5px; width: 49%; height: 300px; border: 1px solid black;">
            <p>Lorem ipsum dolor</p>
        </div>
    </div>

Answer 2

将 float:left; 添加到您的样式中。此外，如果您要分配一些边框，最好使用 box-sizing:border-box; 这样不会让边框影响元素宽度。

希望对您有所帮助

Answer 3

<p> 是一个块元素，您将它嵌套在一个内联元素中。这是不应该发生的，并且会导致布局问题。块元素将创建一个新行。

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

此布局可能更适合您。 https://jsfiddle.net/jzcxhp2L/7/

<div style="display: flex; height: 300px; width: 95vw; margin:0 auto;">
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
  </div>
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    </div>
</div>

Answer 4

<p>有自己的保证金

尝试将 margin-top and/or bottom 设为 0px

p {
    margin-top: 0px ;
    margin-bottom: 0px ; 
}

或者尝试给你的 <p> 标签一个 class with display = inline

.class-inline {
    display: inline ; 
}

或使用内联样式：

<p style="display: inline">

为什么 p 标签会压低父级 div？

Why is p tag pushing down parent div?

html

css

inline-styles