css之padding,marging

padding:内边距,所有浏览器都支持,不允许使用负值

    继承内部格式生成了10px的边距。

属性:

  auto:浏览器计算机内边距。

  length:规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。

  %:规定基于父元素的宽度的百分比的内边距。

  inherit:规定应该从父元素继承内边距。

html代码

<body>
    <div style="width: 500px;height: 300px;border: solid 1px;background-color: #303a40">
        <div style="width: 200px;height: 200px;background-color: #4cae4c;padding: 10px;"></div>
    </div>
</body>

  效果图:

内边距生效前:

       

marging:外边距

  继承外部格式生成了10px边距

css代码

.cs1{
    width: 400px;
    height: 400px;
    border: solid 1px;
    background-color: yellow;
    position: relative;
    left:20px;
    top:20px;
}
.cs2{
    width: 100px;
    height: 100px;
    background-color: black;
    position: relative;
    left:20px;
    top:40px;
    margin:20px;
}

  html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="ctest.css">
</head>
<body>
    <div class="cs1">
        <div class="cs2"></div>
    </div>
</body>
</html>

  效果图原来样式:                                                                      效果图:设置margin后

时间: 2024-10-24 13:51:01

css之padding,marging的相关文章

[转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(padding).边界(border)和边距(margin). 对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响

CSS的padding用法详解

CSS的padding用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域.可以单独定义上下左右某一方位的内边距.代码实例:实例一:没有设置父div的内边距的时候: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"

图解CSS的padding,margin,border属性

本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念. 如果有一点Html基础的

【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(padding).边界(border)和边距(margin). 对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.这里提供一张盒模型的3D示意图,希望便于你的理解和记忆.

CSS百分比padding实现比例固定图片自适应布局 (转载)

一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di

css之padding注意点

1.padding的作用主要是控制边框与内容的距离,即内边距. 2.比如,我写一首唐诗: <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>padding detail</title>     <style type="text/css">     #pad {      width: 100px;

CSS百分比padding实现比例固定图片自适应布局

本文转自 张鑫宇(大神的很多文章都拜读过,写的很好,清晰明了,赞)的 https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/ 一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说

css利用padding百分比实现图片自适应高度

应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class="works-item-t"> <img src="./150x200.png"> </div> .works-item-t { padding-bottom: 133%; position: relative; } .works-item-t &g

css中padding与margin

CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin