块标签边距合并表格定宽居中

最新推荐文章于 2021-08-04 09:09:14 发布

护你一世无怨.メ

最新推荐文章于 2021-08-04 09:09:14 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/qq_45260446/article/details/100672056

版权

相邻的2个块标签，会发生外边距合并，合并之后以边距大的为准如: 20和50最后显示50 防止兄弟标签之间的外边距合并，可以在标签之间加非空字符
块标签，父子标签外边距也会发生合并如何防止父子外边距合并:
(1) 父边框设置边框可防止合并
(2) 父标签设置内边距可防止合并
(3) 父子标签中间加个非空字符

列如：

 <body>
    <div>1</div> 
    <div>2</div>
    <div>3</div>
</body>
<style>
        body{
            border: 1px solid red;
        }
    div{
        border: 1px solid black;
        margin: 50px;
        /* outline 表示一个标签的轮廓线，不会影响标签的尺寸和位置 */
        outline: solid  1px blue;
    }
    </style>

2.表格

  <table>
        <!-- 设置表格表题，默认居中 -->
        <caption>课程表</caption>
       <tr>
           <td></td>
           <td>星期一</td>
           <td>星期二</td>
           <td>星期三</td>
       </tr>
       <tr>
           <td>第一节</td>
           <!-- 合并第二行  rowspan="2" 向下合并两行 -->
           <td rowspan="2">语文</td>
           <td>数学</td>
           <td>英文</td>
       </tr>
       <tr>
           <td>第二节</td>
           <!-- <td>语文</td> -->
           <td>化学</td>
           <td>生物</td>
       </tr>
       <tr>
           <td>第三节</td>
           <!-- colspan="3" 向右合并3列 -->
           <td colspan="3">体育</td>
           <!-- <td>体育</td>
           <td>体育</td> -->
       </tr>
    </table>

定宽居中

<style>
    /*标签居中一般有两种方式居中*/
    /* 对标签设置内容居中 行内有效*/
    div{
        width: 100px ;
        height: 50px;
        background-color: aqua;
    }
    /* 对子标签设置定宽居中 块标签起效*/
    div{
        width: 100px ;
        height: 50px;
        background-color: aqua;
        margin: auto;
    }
    </style>