本文内容：

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

首发日期：2018-05-01

表格边框合并：

发生情况：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

    table{

        border:1px solid red;

    }

    td{

        border:1px solid red;

    }

    </style>

</head>

<body>

    <table cellpadding="0" cellspacing="0">

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td>4</td>

            <td>5</td>

            <td>6</td>

        </tr>

    </table>

</body>

</html>

解决方案：

  • 在table标签中设置border-collapse:collapse 【border-collapse是边框合并的意思。】
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

    table{

        border:1px solid red;

        border-collapse:collapse;

    }

    td{

        border:1px solid red;

    }

    </style>

</head>

<body>

    <table cellpadding="0" cellspacing="0">

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td>4</td>

            <td>5</td>

            <td>6</td>

        </tr>

    </table>

</body>

</html>

兄弟标签外边距合并：

发生情况：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

        div:first-child{

            margin-bottom:15px;

            background-color: orange;

        }

        div:last-child{

            margin-top:35px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div>123</div>

    <div>123</div>

</body>

</html>

解决方案：

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

父子标签的外边距合并：

发生情况：

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <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">123</div>

    </div>

</body>

</html>

解决方案：

  • 给父元素定义上边框或上内边距
  • 给父元素添加overflow:hidden
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <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">123</div>

    </div>

</body>

</html>

CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并的更多相关文章

  1. css样式表格边框1px hover时为2px 实现方式

    //css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...

  2. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  3. HTML+css基础 表格标签table Table标签属性 td标签属性

    表格标签table:   他是由行与列构成,最小单位是单元格. 行标签  <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...

  4. css中的border-collapse属性如何设置表格边框线？（代码示例）

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  5. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

  6. CSS学习笔记（3）--表格边框

    http://www.alixixi.com/web/a/2009082657736.shtml 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很 ...

  7. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  8. 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  9. 学习笔记 第九章 使用CSS美化表格

    第9章  使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...

随机推荐

  1. Word文档使用密码加密

    Word文档使用密码加密 方法如下: 文件-->信息-->保护文档-->用密码进行加密-->设置密码

  2. 微信小程序入门（四）

    16.WXSS特性之模板及引用 模板引用 index.wxml <template name="tempItem"> <view> <view> ...

  3. Object.defineProperty方法

    Object.defineProperty() (一次添加/修改一个属性) 用法:Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一 ...

  4. vue 关于数组和对象的更新

    在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...

  5. php（curl请求）测试接口案例

    请求测试接口,如下: $data = [']; $result = curlrequest($apiUrl,$data); ){ echo json_encode($result); }else{ e ...

  6. sql server 索引阐述系列八 统计信息

    一.概述 sql server在快速查询值时只有索引还不够,还需要知道操作要处理的数据量有多少,从而估算出复杂度,选择一个代价小的执行计划,这样sql server就知道了数据的分布情况.索引的统计值 ...

  7. MFC控件编程进度条编写

    MFC控件编程进度条编写 一丶进度条编程需要用到的方法 进度条MFC已经帮我们封装好类了. 叫做 CProgressCtrl  进度条编程也很简单. 封装的方法也就那个那几个. GetPos()  获 ...

  8. solr概况

    1.solr对比lucence lucence vs solr 类似于引擎 vs 汽车. 2. solr架构 3. 对应lucence/solr源码分析 RequestHandler 处理一个url请 ...

  9. Dijkstra——单源最短路径

    算法思想 ①从一个源点开始,找距离它最近的点顶点v ②然后以顶点v为起点,去找v能到达的顶点w,即v的邻居 比较源点直接到 v的距离和(源点到v的距离+v到w的距离) 若大于后者则更新源点的到w的开销 ...

  10. SQLite占用资源少原因

    本篇承接上篇SQLite详解的下篇,介绍SQLIte为什么占用资源少的原因?本文主要参考https://blog.csdn.net/hanyingzhong/article/details/46400 ...