CSS的方框属性（border，padding，margin）

最新推荐文章于 2023-04-23 21:37:01 发布

须佐能乎！

最新推荐文章于 2023-04-23 21:37:01 发布

阅读量2k

点赞数 1

分类专栏： HTML CSS 文章标签： html css border padding margin

本文链接：https://blog.csdn.net/qq_34416191/article/details/51646330

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

<html>
	  <head>
	  	  <title>方框属性</title>
	  	  <!--方框属性：包括边框属性border，填充属性padding，边界属性margin-->
	  	  <style type="text/css">
	  	  	  /*边框样式使用border属性，任何元素都具有四个边框，每个边框都可以单独定义粗细，颜色和样式。*/
	  	  	  .tableborder{
	  	  	  	  border-bottom-color:red;/*边框颜色*/
	  	  	  	  border-bottom-style:double;/*边框样式*/
	  	  	  	  border-bottom-width:3px;/*边框粗细*/
	  	  	  	}
	  	  	  	tr{
	  	  	  		  background:yellow;
	  	  	  		}
	  	  	  	/*内边距样式：使用padding属性，用来设置边框内的内容距边框四个方向的距离*/
	  	  	  	td{
	  	  	  		  padding-top:1cm;
	  	  	  		  padding-right:100px;
	  	  	  		  padding-bottom:1cm;
	  	  	  		  padding-left:10px;
	  	  	  		}
	  	  	  	p{
	  	  	  		  border:1px double blue;
	  	  	  		}
	  	  	  	/*外边距使用margin属性，用来定义元素与其他元素的距离，有上下左右四个方向*/
	  	  	  	#setmargin{
	  	  	  		margin-top:5cm;
	  	  	  		margin-right:13cm;
	  	  	  		margin-left:4cm;
	  	  	  		margin-bottom:5cm;
	  	  	  		}
	  	  </style>
	  	  
	  </head>
	  <body>
	  	  <table>
	  	  	  <tr style="background:blue">
	  	  	  	  <td class="tableborder">手机品牌</td>
	  	  	  	  <td >手机型号</td>
	  	  	  </tr>
	  	  	  <tr>
	  	  	  	  <td class="tableborder" align="center">魅族</td>
	  	  	  	  <td align="center">pro6</td>
	  	  	  </tr>
	  	  </table>
	  	  
	  	  <br><br>
	  	  <p>这段话没有指定外边距！！！</p>
	  	  <p id="setmargin">这段话指定外边距！！！like this</p>
	  </body>
</html>

须佐能乎！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS的方框属性（border，padding，margin）

方框属性 /*边框样式使用border属性，任何元素都具有四个边框，每个边框都可以单独定义粗细，颜色和样式。*/ .tableborder{ border-bottom-color:red;/*边框颜色*/ border-bottom-style:double;/*边框样式*/
复制链接

扫一扫

专栏目录