| HTML中详述外边距样式属性（margin）与内边距样式属性（padding） | 您所在的位置：网站首页 › html设置外边距的上下左右 › HTML中详述外边距样式属性（margin）与内边距样式属性（padding） |
HTML中详述外边距样式属性（margin）与内边距样式属性（padding）
|
外边距样式属性（margin）
外边距样式属性（margin）：设置边框外的距离。 属性：margin-top样式属性，margin-bottom样式属性，margin-left样式属性和margin-right样式属性。 代码示例： *{ margin: 0px; padding: 0px; }郑州大学第一附属医院 白日依山尽，黄河入海流 郑州大学 p,div{ border: 5px solid red; text-align: center; width: 900px; margin: 0px auto;/*使块级元素居中*/ } /*margin：外边距 * 用于设置同级标签的间距,左右时相加合并，上下时取最大值 */ /*p{ margin-bottom: 100px; } div{ margin-top: 50px; } b{ margin-left: 50px; } span{ margin-right: 50px; }*/ span,b{ display: inline-block; } b{ background-color: black; }郑州大学第一附属医院 郑州大学真好 白日依山尽，黄河入海流 b{ /*margin-left: 50px; margin-right: 50px;*/ /*margin: 50px;*/ margin:10px 50px ;/*上下 左右*/ margin: 10px 50px 10px;/*上 左右 下*/ margin: 10px 50px 10px 50px;/*上 右 下 左 顺时针*/ }效果图：
一、margin属性可以有 1 到 4 个值： 1个值：表示上下左右外边框边距均为50px； margin: 50px;2个值：表示上下外边框边距为10px，左右外边框边距为50px； margin:10px 50px ;/*上下 左右*/3个值：表示上外边框边距为10px，左右外边框边距为50px，下外边框边距为10px； margin: 10px 50px 10px;/*上 左右 下*/4个值：表示上外边框边距为10px,右外边框边距为50px,下外边框边距为10px,左外边框边距为50px margin: 10px 50px 10px 50px;/*上 右 下 左 顺时针*/二、margin:0 auto;——水平居中显示，例子 例子 三、取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置。 *{ margin:0; } margin-top样式属性设置元素的上外边距，该属性有多个值：
设置元素的下外边距，该属性有多个值：
设置元素的右外边距， 该属性有多个值：
设置元素的左外边距， 该属性有多个值：
内边距样式属性（padding）：设置边框中内容与边框的距离。 属性：padding-top样式属性，padding-bottom样式属性，padding-left样式属性和padding-right样式属性。 代码示例： 郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院 p{ /*padding用于设置内部元素距离边框的间距*/ border: 1px solid red; /*padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px;*/ /*padding: 20px;*/ /*padding: 10px 50px;/*上下 左右*/*/ /*padding: 5px 100px 50px;/*上 左右 下*/*/ padding: 5px 50px 90px 100px;/*上 右 下 左 顺时针*/ }其余同margin相同
|
【本文地址】
公司简介
联系我们