本文内容：

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

首发日期：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. 可以用py库： pyautogui （自动测试模块，模拟鼠标、键盘动作）来代替pyuserinput

    PyAutoGUI 是一个人性化的跨平台 GUI 自动测试模块 pyUserInput模块安装前需要安装pywin32和pyHook模块.(想要装的看https://www.cnblogs.com/m ...

  2. for循环中变量的作用域问题

    看下面这一行代码 for (let i = 0; i < 3; i++) { let i = 'abc' console.log(i) } // abc // abc // abc 从上面可以看 ...

  3. 值得关注的10个python语言博客

    大家好,还记得我当时学习python的时候,我一直努力地寻找关于python的博客,但我发现它们的数量很少.这也是我建立这个博客的原因,向大家分享我自己学到的新知识.今天我向大家推荐10个值得我们关注 ...

  4. 加密的m3u8、ts文件合并

    加密后的ts文件不能直接合并或播放,需要使用key对每个ts文件进行解密. 分为两种情况: (1).如果ts文件已经全部下载好,则可以直接在本地通过ffmpeg快速解密合并. (2).如果ts文件没有 ...

  5. Docker介绍及常用操作演示（一）--技术流ken

    Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互 ...

  6. asp.net 中Repeater和Gridview的区别

             Griview:              优点:1.GridView是从WebControl派生出来的,拥有WebControl样式属性,自身会被解析为table,其中的每一行会被 ...

  7. SqlServer中循环和条件语句

    if语句使用示例 declare @a int              set @a=12              if @a>100                 begin      ...

  8. 使用浏览器自定义协议启动本地程序(.EXE文件）

    比如,自定义协议名称为 myapp,要启动的本地程序为 myapp.exe. 1)首先向注册表添加如下内容: Windows Registry Editor Version 5.00 [HKEY_CL ...

  9. vb.net 数字大写

    Private Function RMBChinese(ByVal Rmb As Double) As String Dim Rmbexp As String  Dim Rmbda As String ...

  10. HbuilderX 常用快捷键

    最新2019.3.30版本已经添加idea的快捷键,就不需要再额外记住HbuilderX的快捷键啦~ 链接 输入a,按下tab 加粗 ctrl+B 换行 需要换行的那一行后面加2个空格(或者按下tab ...