本文内容：

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

首发日期：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. 【转载】红外遥控HS0038B接法

        4.7uF电容的作用:去耦和旁路   去耦电容的主要功能就是提供一个局部的直流电源给有源器件,以减少开关噪声在板上的传播和将噪声引导到地.通常也把输出信号的干扰作为滤除对象. 旁路电容:为高频 ...

  2. Linux常用命令之文件和目录处理命令

    目录 1.Linux命令的普遍语法格式 2.目录处理命令 一.显示目录文件命令:ls 二.创建目录命令:mkdir 三.切换目录命令:cd 四.shell内置命令和外部命令的区别 五.显示当前目录命令 ...

  3. Linux Namespace : User

    User namespace 是 Linux 3.8 新增的一种 namespace,用于隔离安全相关的资源,包括 user IDs and group IDs,keys, 和 capabilitie ...

  4. Elastic Search 安装和配置

    目标 部署一个单节点的ElasticSearch集群 依赖 java环境 $java -version java version "1.8.0_161" Java(TM) SE R ...

  5. DynamicProxy系列目录

    C# 1.基于Emit实现动态代理 2.Microsoft.CodeAnalysis动态生成代理类 3.castle dynamicproxy + AutoFac 4.DispatchProxy .R ...

  6. 分享一个爬取HUST(哈理工)学生成绩的Python程序(OCR自动识别验证码)

    Python版本:3.5.2 日期:2018/1/21 __Author__ = "Lance#" # -*- coding = utf-8 -*- from urllib imp ...

  7. ASP.NET Core中使用Graylog记录日志

    以下基于.NET Core 2.1 定义GrayLog日志记录中间件: 中间件代码: public class GrayLogMiddleware { private readonly Request ...

  8. [PHP]算法-最长公共子串的PHP实现

    最长公共子串问题: 给定两个字符串,求出它们之间最长的相同子字符串的长度. 暴力解法思路: 1.以两个字符串的每个字符为开头,往后比较,这样就会需要两层循环 2.两层循环内部的比较方式,也是一层循环, ...

  9. HbuilderX 常用快捷键

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

  10. 【Tomcat】Tomcat相关设计模式分析

    门面模式 门面模式在 Tomcat 中有多处使用,在 Request 和 Response 对象封装中.Standard Wrapper 到 ServletConfig 封装中.Application ...