精华内容
下载资源
问答
  • 块级元素和行内元素边距问题

    千次阅读 2016-09-20 13:29:09
    CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。 标准文档流:从高往低,从左到右,从上到下,输出文档内容。由块级标签和行级标签。...行级元素:可以在同一行显示 span strong img input 大部

    CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。

    标准文档流:从高往低,从左到右,从上到下,输出文档内容。由块级标签和行级标签。

    块级元素:从左到右撑占一行,触碰边缘会自动换行。

    div是典型的块级元素,p,ul,dl.dt

    dreamweaver调试窗口是模仿IE 的

    行级元素:可以在同一行显示  span   strong    img    input   大部分的表单元素是属于行级,但不是绝对

    块级和行级都是属于盒子模型。

    设置边距:

    4个值:上  右   下   左

    3个值  :上      左右      下

    2个值:上下     左右

    四个:方向的都是相同的。



    展开全文
  • 试图给行内元素设置内边距的时候出现了点问题,给块级元素设置内外边距都有明显的效果,那么给行内元素设置内外边距是否有效果呢。 一、行内元素设置内边距 1.代码展示 <style> *{ margin: 0px; padding: ...

    试图给行内元素设置内边距的时候出现了点问题,给块级元素设置内外边距都有明显的效果,那么给行内元素设置内外边距是否有效果呢。

    一、行内元素设置内边距

    1.代码展示

    <style>
         *{
             margin: 0px;
             padding: 0px;
         }
         span{
             padding: 10px 20px 30px 40px;
         }
         div{
             width: 50px;
             height: 50px;
             background-color: blue;
         }
    </style>
    <body>
        <span>我是span</span>
        <div>我是div</div>
    </body>
    

    2.结果展示
    在这里插入图片描述
    3.结果分析

    1. 可以看到padding-left设置成功,padding-right设置成功,padding-top和padding-bottom的设置出现了问题。
    2. span的padding-bottom好像设置成功,但对实际的布局没有影响,只是盖住了div的背景颜色。

    4.结论

    1. 行内元素在水平方向上的内边距设置是有效的,在垂直方向上的内边距设置是无效的。

    5.补充

    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
    <span>我是span4</span>
    

    给span1,span2,span3,span4分别设上10px的上、右、下、左内边距后
    在这里插入图片描述
    注:中间的空白间隙是换行符导致的

    二、行内元素设置外边距

    1.代码展示

    <style>
        *{
             margin: 0px;
             padding: 0px;
         }
         span{
             padding: 10px 20px 30px 40px;
             background-color: red;
             margin: 30px;
         }
         div{
             width: 50px;
             height: 50px;
             background-color: blue;
         }
    </style>
    <body>
    	 <span>我是span1</span>
    	 <span>我是span2</span>
    	 <span>我是span3</span>
    	 
    	 <div>我是div</div>
    </body>
    

    2.结果展示
    在这里插入图片描述
    3.结果分析

    1. margin-left和margin-righ设置成功,margin-top和margin-bottom设置出现问题
    2. margin-top和margin-bottom的设置并没有对布局产生影响

    4.结论

    1. 行内元素在水平方向上的外边距设置是有效的,在垂直方向上的内边距设置是无效的。

    三、总结

    1. 行内元素在水平方向上设置内外边距是有效的,在垂直方向上设置内外边距是无效的。
    2. 在垂直方向上给行内元素设置内边距,在显示上是将元素范围扩大了,但实际上不会对周围元素有任何影响。

    四、特殊情况:img

    img作为行内元素,但同时也是替代元素,它是可以设置宽高,也可以设置内外边距的!
    在这里插入图片描述在这里插入图片描述

    展开全文
  • }行内元素之间的默认边距是4px另外关于本地图片间距正常,上线后图片又出现4px间距是因为,在服务器发布的时候会压缩代码,将空格去掉,所以在本地的时候需要删除图片间的空格,以及图片之间不要换行显示,或者比...

    今天想看一下body的默认边距

    看了一下浏览器,body的默认边距是8px

    所以在写页面之前都要去掉默认边距

    *{margin:0; padding:0;}

    行内元素之间的默认边距是4px

    另外关于本地图片间距正常,上线后图片又出现4px间距

    是因为,在服务器发布的时候会压缩代码,将空格去掉,所以在本地的时候需要删除图片间的空格,以及图片之间不要换行显示,或者比线上少4px,发布后服务器图片间距显示正常


    展开全文
  • 但是当子元素为行内元素的时候,内边距对父级元素是无影响的。 如下例: div和span的内边距对父级div的影响 .d1{ border: solid 1px red; } .d2{ border: solid

    1、内边距对父级元素的影响

    当块级元素里面还是块级元素且没有定义宽高时,子块级元素的内边距会将父块级元素撑开;

    但是当子元素为行内元素的时候,内边距对父级元素是无影响的。

    如下例:

    div和span的内边距对父级div的影响

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    		.d1{
    			
    			border: solid 1px red;
    		}
    		.d2{
    			
    			border: solid 1px blue; 
    			padding: 100px;
    		}
    		a{
    		   padding: 10px;
    			border: 1px solid #ccc;
    			border-radius: 5px;
    		}
    		.s1{
    			border: 1px solid yellow;
    			padding: 20px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="d1">
    			<div class="d2">这是一段测试文本</div>
    		</div>
    		<div class="d1">
    			<span class="s1">这是一段测试文本</span>
    		</div>
    	</body>
    </html>
    
    当腹肌元素限定了宽高时,子元素的内外边距对父级元素都无影响,但是会出现溢出的情况。

    2、外边距的特殊情况:

    想要实现子元素在父元素中分离:


    使用margin-top后却是下面的效果:


    这就是在(1)、第一个子元素的外边距(2)、父级元素无边框等的遮挡时会出现的情况。

    解决办法:

    (1)、给父级元素添加透明边框,但是会影响父级元素的尺寸,若想保持原有的尺寸,应在原有尺寸上减去边框的尺寸;

    (2)、父级元素添加<table></table>空元素。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    		.d1{
    			width: 200px;
    			height: 200px;
    			background-color: red;
    		}
    		.d2{
    			width: 100px;
    			height: 100px;
    			background-color: blue;
    			margin:20px;
    		}
    		a{
    		   padding: 10px;
    			border: 1px solid #ccc;
    			border-radius: 5px;
    		}
    		.s1{
    			border: 1px solid yellow;
    			padding: 20px;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="d1">
    			<div class="d2"></div>
    		</div>
    	</body>
    </html>
    




    展开全文
  • 行内元素在渲染是会默认添加右侧和底部边距,如果在多个图片排列时这种情况就比较明显,当我们需要在布局上完全无边距的时候就需要去除这些编剧 去除方法就是 // 在单元元素上添加下面对应的属性去除边距 // ...
  • 行内元素的内边距对左、右、下起作用。 行内元素的外边距只对左、右起作用。 *{ margin: 0; padding: 0; } .span1{ background: red; margin: 20px; } .span2{ background: red; ...
  • 原因:这些标签分为行内元素和块级元素,对宽高和边距的设置有一定的要求。就拿行内元素span和块级元素div举例。 span标签设置宽高和边距时需要注意的是:1、span标签设置其上下边距无效,设置左右边距有效,且其...
  • 对于行内元素的内外边距问题有时候分的不是很清晰,特此做了一个小实验加深印象: 首先整体html结构为: <div class="container"> <p> <span>SPAN1</span> <span>SPAN2</span&...
  • 块级元素 1.独占一行 2.宽度是父容器的100% 3.宽度 高度 外边距 内边距都可以灵活设置 4.是一个容器和盒子,里面可以放块元素或者行内元素 ...只有文字才能组成段落P...4.行内元素只能容纳文本或者其他行内元素. 注意
  • 今天再次遇到行内元素转换为inline-block后换行产生距离的问题(也许不止有行内元素,其他的没有遇到),然后就找了一个解决办法,原文可以参考http://www.cnblogs.com/PeunZhang/archive/2012/09/28/2706094.html ...
  • 块元素 行内块元素 行内元素的特点。 一、块元素 block 自已独占一行。 宽度,高度,外边距,内边距都可以自己控制。 宽度默认为是父元素的100%。 是一个容器及盒子,里面可以放行内或者块元素。 二、行内元素 ...
  • 行内元素和其他元素都在一行上,高度、行高、内边距和外边距都不可改变。宽度是它文字或者图片的宽度,也是不可改变的。行内元素只能容纳文本或者其他行内元素。之前文章中讲到的 a,img,br是行内元素。块级(...
  • CSS——行内元素间的默认边距

    千次阅读 2018-12-13 18:25:59
    可以看到,每两个span之间莫名的多了意料之外的边距,这些边距是在coding中编写span时换行所导致,修改代码: < span > 首页 span > < span > 网站建设 span > < span > 程序开发 span > < span > 网络营销 ...
  • .s3的内边距:明显可以看出 上边距没起作用 参考: http://www.qdfuns.com/notes/26090/795e5a3545adf6d045e65c9cf2c93f74.html 转载于:https://www.cnblogs.com/loveamyforever/p/6347217.html
  • 行内元素的特点 书写不会令其一行 和其他元素处于一行上 高度宽度以及内外边距无法修改 <p><span style="background-color:red;">我</span>是内联元素 </p> 行内块级元素的特点 行内...
  • 行内元素 a strong b em del span 也叫内联元素 宽高直接设置是无效的 只能容纳文本或其他行内元素 特殊情况a 可以放块级元素 行内块元素 <img /> <input /> <td> 同时具有块元素和行元素的特点 ...
  • 块元素 特点: 自己独占一行 高度、宽度、外边距、内边距都可以控制 宽度默认是容器(父级宽度)的100% 是一个容器及盒子,里面可以放行内或块级元素 ...行内元素只能容纳文本或其他行内元素
  • 行内元素

    2020-10-27 15:22:36
    行内元素的定义 指在正常文档流中会在一条水平线上排列的元素 行内元素有哪些 常用的: span img a td input label button select, textarea em small sup sub code 行内元素的特性 不可以设置宽高,宽高由内容决定...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,276
精华内容 510
关键字:

行内元素边距