三栏自适应布局,p标签问题

爪哇岛的大蟒蛇
  • 3
新手上路,请多包涵

这儿用p标签和div标签不一样。

<style>
        #box {
            width: 100%;
        }

        #left {
            float: left;
            width: 100px;
            background-color: red;
        }

        #right {
            float: right;
            width: 100px;
            background-color: red;
        }

        #middle {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="left">左</div>
        <div id="right">右</div>
        <div id="middle">中</div>
    </div>
</body>

div标签

 <style>
        #box {
            width: 100%;
        }

        #left {
            float: left;
            width: 100px;
            background-color: red;
        }

        #right {
            float: right;
            width: 100px;
            background-color: red;
        }

        #middle {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="box">
        <p id="left">左</p>
        <p id="right">右</p>
        <p id="middle">中</p>
    </div>
</body>


使用p标签和div标签效果怎么不一样,p标签不也是块级元素嘛?

回复
阅读 1.5k
2 个回答
ethanYin
  • 125
✓ 已被采纳

很好的一个问题,为了回答你这个问题,专门去看了相关知识🤣。

回答

直接设置 p {margin:0} 去除默认 margin 就可以消除这个问题


其实这个margin不是margin。body 自带margin属性作为对比

image.png
image.png

聊聊 css属性 margin-block-start, margin-block-end, margin-inline-start**, margin-inline-start** 吧

margin-block-start CSS 属性定义了一个元素的逻辑块的开始边距, 是用来根据元素的书写模式,方向和文本方向进行实际边界的衡量。margin-block-start | MDN⇲

目前主流浏览器都支持了,兼容性不存在问题。
当然这里出现的问题是因为 P 标签 自带(浏览器设置)的 margin-block-start, margin-block-end 两个属性值影响。

image.png

要去除也简单, 设置 属性 margin-block-start: 0.

image.png

与 margin 关系可以简单的理解为

margin-block-start == margin-top
margin-block-end == margin-bottom
margin-inline-start == margin-left
margin-inline-end == margin-right

只是多了方向的判断

  • 水平方向,满足上面关系
  • 垂直方向,block/inline 分别对应着 水平方向/垂直方向。

边距测试.gif

如果想详细了解,建议精读这篇【鑫神】的文章

其实上面就已经回答了你的疑问,下面是一些补充。

补充

还有个有趣的现象,浮动元素会挤压文字

挤压文字测试.gif

其实关于浮动,它的设计初衷,破坏性和对行盒子(line box)的破坏性值得深入了解的。推荐

以上。希望能解决你的困惑。

因为p标签是默认有margin值的,div没有默认的margin

你可以再加样式

p{
 margin: 0;
}

就和div一样了

宣传栏