资讯专栏INFORMATION COLUMN

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

_Dreams / 2964人阅读

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


本文内容:

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

 

首发日期:2018-05-01

 


表格边框合并:

 

发生情况:

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

</>复制代码

  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Documenttitle>
  6. <style>
  7. table{
  8. border:1px solid red;
  9. }
  10. td{
  11. border:1px solid red;
  12. }
  13. style>
  14. head>
  15. <body>
  16. <table cellpadding="0" cellspacing="0">
  17. <tr>
  18. <td>1td>
  19. <td>2td>
  20. <td>3td>
  21. tr>
  22. <tr>
  23. <td>4td>
  24. <td>5td>
  25. <td>6td>
  26. tr>
  27. table>
  28. body>
  29. html>

 

解决方案:

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

</>复制代码

  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Documenttitle>
  6. <style>
  7. table{
  8. border:1px solid red;
  9. border-collapse:collapse;
  10. }
  11. td{
  12. border:1px solid red;
  13. }
  14. style>
  15. head>
  16. <body>
  17. <table cellpadding="0" cellspacing="0">
  18. <tr>
  19. <td>1td>
  20. <td>2td>
  21. <td>3td>
  22. tr>
  23. <tr>
  24. <td>4td>
  25. <td>5td>
  26. <td>6td>
  27. tr>
  28. table>
  29. body>
  30. html>

 

 


兄弟标签外边距合并:

发生情况:

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

</>复制代码

  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Documenttitle>
  6. <style>
  7. div:first-child{
  8. margin-bottom:15px;
  9. background-color: orange;
  10. }
  11. div:last-child{
  12. margin-top:35px;
  13. background-color: blue;
  14. }
  15. style>
  16. head>
  17. <body>
  18. <div>123div>
  19. <div>123div>
  20. body>
  21. html>

 

解决方案:

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

父子标签的外边距合并:

发生情况:

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

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

</>复制代码

  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Documenttitle>
  6. <style>
  7. #father{
  8. margin-top:100px;
  9. background-color: blue;
  10. }
  11. #son{
  12. margin-top:200px; /* 最终外边距为200px */
  13. background-color: green;
  14. }
  15. style>
  16. head>
  17. <body>
  18. <div id="father">
  19. <div id="son">123div>
  20. div>
  21. body>
  22. html>

 

 

解决方案:

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

 

</>复制代码

  1. DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Documenttitle>
  6. <style>
  7. #father{
  8. margin-top:100px;
  9. background-color: blue;
  10. /* border:1px solid red; 方法一 */
  11. /* padding-top:1px; 第二种方法*/
  12. overflow:hidden; /* 方法三 */
  13. }
  14. #son{
  15. margin-top:200px;

</>复制代码

  1. background-color: green;
  2. }
  3. style>
  4. head>
  5. <body>
  6. <div id="father">
  7. <div id="son">123div>
  8. div>
  9. body>
  10. html>

 

 

 

 


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

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

相关文章

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

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

    zacklee 评论0 收藏0
  • CSS盒子模型以及外边框合并问题

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

    paulli3 评论0 收藏0
  • 挖掘margin属性内涵

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

    alanoddsoff 评论0 收藏0
  • HTML、CSS笔记

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

    frank_fun 评论0 收藏0
  • HTML、CSS笔记

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

    Aomine 评论0 收藏0

发表评论

0条评论

_Dreams

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<