本文内容：

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

首发日期：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. Lua IUP 环境搭建

    1.从sourceforge.net下载Luabinaries.IUP.CD.IM.LuaGL的源码 2.编译CD 2.1.用cd\mak.vc12中的lua_version53.props替换lua ...

  2. C++版 - 剑指offer 面试题31：连续子数组的最大和 题解

    剑指offer:连续子数组的最大和 提交网址: http://www.nowcoder.com/practice/459bd355da1549fa8a49e350bf3df484?tpId=13&am ...

  3. MySQL联合索引VS单列索引

    MySQL联合索引VS单列索引 以一个一千万数据量的表格为例 1. 建表建索引 USE foo; DROP TABLE IF EXISTS tmp; CREATE TABLE tmp ( id INT ...

  4. 剑指offer-学习笔记

    前言:18/06/06开始学习,每个程序都会用C写一遍,因书中用C++举例,也会换种思路写,供学习和参考!!!很推荐这本书很不错,准备入手,一般不买实体书,都用电子书,因一般都看一遍,但这本会看很多遍 ...

  5. 微信小程序跳转小程序

    <navigator target="miniProgram" open-type="navigate" app-id="{{BappId}}& ...

  6. html自适应头

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sca ...

  7. 【Python开发】Python中数据分析环境的搭建

    注:无论是任何一门语言,刚开始入门的时候,语言运行环境的搭建都是一件不轻松的事情. Python的运行环境 要运行或写Python代码,就需要Python的运行环境,主要的Python有以下三类: 原 ...

  8. DataCleaner（4.5）第二章

    Chapter 2. Getting started with DataCleaner desktop Table of Contents |--Installing the desktop appl ...

  9. MySQL/MariaDB表表达式(3)：视图

    视图是表表达式的一种,所以它也是虚拟表.对视图操作的时候会通过语句动态的从表中临时获取数据. 1.创建.修改视图 CREATE [OR REPLACE] [ALGORITHM = {UNDEFINED ...

  10. Go基础系列：数据类型转换(strconv包)

    Go不会对数据进行隐式的类型转换,只能手动去执行转换操作. 简单的转换操作 转换数据类型的方式很简单. valueOfTypeB = typeB(valueOfTypeA) 例如: // 浮点数 a ...