精华内容
下载资源
问答
  • 对于行内元素内外边距问题有时候分的不是很清晰,特此做了一个小实验加深印象: 首先整体html结构为: <div class="container"> <p> <span>SPAN1</span> <span>SPAN2</span&...

    对于行内元素的内外边距问题有时候分的不是很清晰,特此做了一个小实验加深印象:
    首先整体html结构为:

     <div class="container">
            <p>
                <span>SPAN1</span>
                <span>SPAN2</span>
            </p>
            <p>段落2</p>
        </div>
    

    层叠样式表为:

    <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .container {
                margin: 0 auto;
                text-align: center;
            }
    
            p {
                border: 2px solid #000000;
            }
    
            span {
                background: blue;
            }
       </style>
    

    1、对行内元素设置padding=10px;

            span {
                padding: 10px;
                background: blue;
            }
    

    效果如下图,left、right和bottom均体现了效果但没有撑开p标签,且padding-top没有如预期般撑开span:
    在这里插入图片描述

    如果给外层容器添加一个外边距,则发现SPAN的padding-top体现了效果:

           .container {
                width: 400px;
                margin: 20px auto;
                text-align: center;
            }
    

    在这里插入图片描述

    2、对行内元素设置margin=10px;

      span {
                margin: 50px;
                background: blue;
            }
    

    结果为左右有效果,上下无效果并且没有撑开p标签
    在这里插入图片描述

    展开全文
  • 但是当子元素为行内元素的时候,内边距对父级元素是无影响的。 如下例: 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>
    




    展开全文
  • 试图给行内元素设置内边距的时候出现了点问题,给块级元素设置内外边距都有明显的效果,那么给行内元素设置内外边距是否有效果呢。 一、行内元素设置内边距 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作为行内元素,但同时也是替代元素,它是可以设置宽高,也可以设置内外边距的!
    在这里插入图片描述在这里插入图片描述

    展开全文
  • /*将行内元素转换成块状元素; display:inline 行内显示,none 隐藏,block 块状显示 a{display: block; height: 40px; width: 100px; background-color:blueviolet; }*/ #menu li { list-style : none...
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{border: 1px solid #FF0000;}
                #head{height: 20px;}
                #daohang{height: 300px;}
                #daohang2{height: 400px;}
                #footer{height: 30px;}          
                /*块状标签默认独占一行:宽100%,可以设置宽高;
                 行内标签设置宽高无效*/
                .firstLetter{
                    color: green;
                    font-size: 3em; /*字体是默认字体的3倍*/
                    float: left; /*产生下沉效果*/
                }
                /*将行内元素转换成块状元素;  display:inline 行内显示,none 隐藏,block 块状显示
                a{display: block; 
                  height: 40px;
                  width: 100px;
                  background-color:blueviolet;
    
                }*/
    
                #menu li{list-style: none;
                width: 100px;
                height: 20px;
                background-color: cornflowerblue;
                float: left;
                margin: 5px; /*外边距*/
                text-align: center;
                padding: 10px 0; /*内边距*/
                }
    
            </style>
        </head>
        <body>
            <div id="head">头部</div>
            <div id="daohang">
                <a href="#">新闻</a>
                <a href="#">地理</a>
                <a href="#">自然</a>
                <a href="#">军事</a>
                <a href="#">娱乐</a>
                <a href="#">科技</a>
            </div>
            <div id="daohang2">
                <ul id="menu">
                    <li><a href="#">新闻2</a></li>
                    <li><a href="#">地理2</a></li>
                    <li><a href="#">自然2</a></li>
                    <li><a href="#">军事2</a></li>
                    <li><a href="#">娱乐2</a></li>
                    <li><a href="#">科技2</a></li>
                </ul>
            </div>
            <div>
                <h1>W3C</h1>
                <hr />
                <p><span class="firstLetter">w3c</span>是万维网的缩写万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。万维网联盟创建于1994年,是Web技术领域最具权威和影响</p>
            </div>
            <div id="footer">脚部</div>
        </body>
    </html>
    
    展开全文
  • 2019独角兽企业重金招聘Python工程师标准>>> 1、两个同级元素,垂直排列,上面的盒子给margin...行内元素本身能设置内外边距 转载于:https://my.oschina.net/u/2949632/blog/783455
  • 关于清除元素的内外边距: 1、行内元素只有左右边距、没有内外边距、内边距在ie6等低版本的浏览器中也会有问题。尽量不要给元素指定行内的内外边距; 2、外边距的合并 使用margin定义块元素的垂直外边...
  • 清除内外边距 网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。...行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级元素和行内块元素就可以。 ...
  • 行内元素(inline):宽高不可改变,上下内外边距不可改变,左右内外边距可以改变,如 b 、a 、span 、i 等 行内块元素(inline-block):可设置宽高、内外边距,但不会自动换行,如 input、img、button 等 ...
  • 高度宽度以及内外边距无法修改 <p><span style="background-color:red;">我</span>是内联元素 </p> 行内块级元素的特点 行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。...
  • 块元素 特点: 自己独占一行 高度、宽度、外边距、内边距都可以控制 ...宽、高直接设置是无效的,只能设置水平方向的内外边距 默认宽度是它本身内容的宽度 行内元素只能容纳文本或其他行内元素
  • 块级元素、行内元素、行内块元素 块级元素 特点: 独占一行 可以设置宽高 ,内外边距 常见元素:div,h1~h6,p,ul, table 等 行级标签 特点: 水平排列 不能设置宽高,但可以设置内外边距 高度height 无效,...
  • ​ 可以设置其宽度 高度 内外边距 ​ 在不手动设置宽度和情况下,宽度默认为所在容器的100%(即容器宽度) ​ 可以容纳行内元素和其他块级元素 ​ 常见的块级元素 div h1~h6 p ul table 行内元素 ​ 总是和相邻的...
  • 行内元素和块级元素是是html部分的两大重点之一吧,二者的区别也是面试常问,掌握二者的区别有利于我们更好的学习html。...3)行内元素不能为其设置宽高,垂直方向的内外边距。 4)行内元素不能嵌套块级元素。 还有
  • 宽度高度和内外边距可以控制 宽度默认为父容器的100% 是一个容器和盒子,里面可以放行内或块级元素 常见块级元素有: h1-h6、p、div、ol、li等 注意: 文字类元素内部不能使用块级元素 p标签主要用于存放文字,...
  • 块级元素、行内元素、行内块元素 块级元素 特点: 独占一行 可以设置宽高 ,内外边距 常见元素:div,h1~h6,p,ul, table 等 行级标签 特点: 水平排列 不能设置宽高,但可以设置内外边距 高度height 无效,...
  • (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。 注:文字类的块级元素不能容纳块级元素,例如<p>/<h1>~<h6>/<dt> 2.行内元素: (1)会和相邻的行内元素排成...
  • 块级元素和行内元素

    2019-11-25 15:35:22
    可以设置宽,高,内外边距;若没有设置宽度,则默认为父级的100% 可以容纳内联元素和其他块级元素 常见的块级元素有:, ~, , , , 等 但是, 类似,~等里面不能放块级元素 行内元素 与其他行内元素并排 不能...
  • 可以设置其宽度、高度,内外边距,独占一行 默认宽度为100% 不受空格影响 可以容纳行内元素和其他块元素 常见的块元素:div,h1~h6,ul,li,p,table等 行内元素(inline-level) 不支持宽高(宽高根据内容大小...
  • 与之相反,行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。(置换元素除外,见置换元素篇) 2.行内、块级元素区别:  1,块级...
  • 可以在样式里设置宽高,内外边距; 宽度默认是父容器的100%; ​ 可以装其他的块元素或行内元素。 注意:文字类的元素内不能使用块元素。 例 p, 主要用于存放文字,里面不能放块级元素 如div。 h1-h6都是...
  • 文章目录1. 盒子模型(Box Model)组成2. 边框 border表格的细线边框边框会影响盒子的实际大小3. 内边距 paddingpadding会影响盒子... 清除内外边距7. 圆角边框8. 盒子阴影9. 文字阴影 1. 盒子模型(Box Model)组成 b
  • 行内元素、块级元素

    2018-09-30 10:26:00
    块级元素: Div,h1-h6,p,ul,li 特点: 独占一行 可以设置宽高 ...可以设置内外边距,上下内外边距不起作用 特点: 不用独占一行 不能直接设置宽高 元素的宽和高就是内容撑开的宽高 行内...
  • 可控制宽度和高度,以及四个方向的内外边距 可容纳块级元素和行内元素 默认情况下宽度与浏览器宽度一样,与内容无关 2.行内元素 与其他元素位于同一行 不可控制宽度和高度,以及垂直方向的内外边距;只能...
  • 果然,前端的水还是很深,css并不是把各个样式记下来就行。...2.高度宽度以及内外边距都是可控的,宽度没有设置的时候默认为100% 3.样式用class控制 4.块级元素中可以包含块级元素和行内元素 HTML中的块级元...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 232
精华内容 92
关键字:

行内元素内外边距