CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

_Dreams 发布于2019-04-23 13:46 / 2923人阅读

摘要：本文内容表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期表格边框合并发生情况当设置了后，表格的相邻边框会合并，使得边框变粗了。

本文内容：

表格边框合并
兄弟标签外边距合并
父子标签的外边距合并

首发日期：2018-05-01

表格边框合并：

发生情况：

当设置了cellpadding="0" cellspacing="0"后，表格的相邻边框会合并，使得边框变粗了。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
    table{
        border:1px solid red;
    }
    td{
        border:1px solid red;
    }

    style>
head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>1td>
            <td>2td>
            <td>3td>
        tr>
        <tr>
            <td>4td>
            <td>5td>
            <td>6td>
        tr>
    table>
body>
html>

解决方案：

在table标签中设置border-collapse:collapse 【border-collapse是边框合并的意思。】

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
    table{
        border:1px solid red;
        border-collapse:collapse;
    }
    td{
        border:1px solid red;
    }

    style>
head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>1td>
            <td>2td>
            <td>3td>
        tr>
        <tr>
            <td>4td>
            <td>5td>
            <td>6td>
        tr>
    table>
body>
html>

兄弟标签外边距合并：

发生情况：

当上下两个相邻的标签都设置了外边距时，那么他们之间的间距不是外边距之和，而是其中最大的外边距。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        div:first-child{
            margin-bottom:15px;
            background-color: orange;
        }
        div:last-child{
            margin-top:35px;
            background-color: blue;
        }
    style>
head>
<body>
    <div>123div>
    <div>123div>
body>
html>

解决方案：

没方法解决，理论上应该仅仅设置一边的边距。最好的解决方法就是避免。

父子标签的外边距合并：

发生情况：

想使子标签对父标签有一个外边距，但发生了外边距合并，子标签的外边距没有作用到父标签，反而合并到父标签对于其他标签的外边距中（谁大采用谁）。

如果父标签没有设置上内边距以及边框，则父标签和子标签的上外边距会合并，合并之后的外边距为两者之和。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        #father{
            margin-top:100px;
            background-color: blue;
        }
        #son{
            margin-top:200px; /* 最终外边距为200px */
            background-color: green;
        }
    style>
head>
<body>
    <div id="father">
        <div id="son">123div>
    div>
body>
html>

解决方案：

给父元素定义上边框或上内边距
给父元素添加overflow:hidden

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        #father{
            margin-top:100px;
            background-color: blue;
            /* border:1px solid red;  方法一 */
            /* padding-top:1px;  第二种方法*/
            overflow:hidden;  /*  方法三 */
        }
        #son{
            margin-top:200px;

            background-color: green;
        }
    style>
head>
<body>
    <div id="father">
        <div id="son">123div>
    div>
body>
html>

云服务器 GPU云服务器 html 边框外边距边距合并 html 的外边距外边距重叠

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2312.html

CSS盒子模型以及外边框合并的问题

摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...

zacklee 2019-08-02 16:01 评论0 收藏0
CSS盒子模型以及外边框合并的问题

摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...

paulli3 2019-08-29 14:03 评论0 收藏0
挖掘margin属性的内涵

摘要：合并问题块级元素的上边距和下边距有时会合并或者折叠为一个外边距捕获到的重要信息只发生在块级元素，但不包括浮动元素和绝对定位元素只发生在和当前文档流方向的相垂直的方向上由于默认文档流是水平流，因此发生合并的就是垂直方向会出现外边距合并的三种基 1、margin合并问题块级元素的上边距和下边距有时会合并或者折叠为一个外边距捕获到的重要信息只发生在块级元素，但不包括浮动元素和绝对定位...

alanoddsoff 2019-08-29 15:29 评论0 收藏0
HTML、CSS笔记

摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。盒模型在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。在标准模式下，一个块的总宽度=...

frank_fun 2019-08-01 18:29 评论0 收藏0
HTML、CSS笔记

摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。盒模型在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。在标准模式下，一个块的总宽度=...

Aomine 2019-08-29 14:22 评论0 收藏0