p标签设置宽高问题

最新推荐文章于 2022-11-08 08:50:40 发布
最新推荐文章于 2022-11-08 08:50:40 发布
阅读量4.2k 收藏
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/120213604
版权

1、代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        p {
            width: 10px;
            height: 10px;
            margin-top: 0;
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <!-- 
        对于宽度：由于p标签时块元素，占据整行，默认整行
        对于高度：默认20.8px
        body{
            margin:0;
            padding:0;
        }
        段间距：默认情况16px
          margin-top:0;
          margin-bottom:0;
    -->
    <p>文章内容</p>
</body>

</html>

2、效果

在这里插入图片描述

geekmice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js获取图片原始宽高的实现代码
11-25
如果我们页面看到的图片都是缩略图，那就需要做个图片点击放大效果，那么怎样获取图片的原始宽高呢？方法如下： //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层，显示原始图片。 //获取class为tz_main_box下的所有p标签下的图片img $(".tz_main_box p>img").each(function (k, v) { $(this).u
一文了解CSS 标签显示模式
11-21
标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。 一、块级元素(block-level) 　　每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 　　常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。 　　特点：（重要） 　　1、独占父亲一行，宽度默认是容器的100%； 　　2、高度，行高、外边距以及内边距都可以控制；（支持宽高的设置） 　　3、不设置高度，高度由内容决定； 　　4、可以容纳内联元素和其他块元素；
浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
12-14
今天讲课的时候，讲到了html中的标签的显示模式，大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！ 比如会有一种情况，给p标签水平居中有作用，但是给font加水平居中属性就没作用（如下）： XML/HTML Code复制内容到剪贴板 p{ color:red; text-align:center;}font{color:red; text-align:center;}     XML/HTML Code
前端基础-CSS标签的显示模式
01-08
标签的显示模式（重点） div和span标签 ​ 1.样式完全相同，标签不同，显示的结果完全不同 ​ 2.每个div会独占一行，多个span会并列一排 1.块元素 特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示—div ul li p h1 示意图 总结：块元素可以添加宽高的属性，独占一行 2.行元素 特点：宽高默认都是0，不能设置宽和高，一行显示—-span b i u a 示意图 总结：对宽高不敏感，不能独占一行 3.行内的块元素 特点：只能设置宽和高，不能换行显示—img input
p标签默认margin-top/bootom
lingliu0824的博客
07-25 3492
以前在写css样式时，都习惯性的加上 *{padding:0;margin:0} 所以有些默认样式问题就没有意识到，直到这次忘记设置这个全局样式，发现定义的p标签的高度比预期高了32px,查了资料发现，原来p标签含有默认的margin-top和margin-bottom,大小都为1em,即当前标签的字体大小（默认为16px) 同样ul也包含默认的padding： 还有很多其他的元素都带有默认的样式，所以为了避免这些带有默认样式的标签带来的意外效果，我们最好设置全局样式： *{padding:0;margi
p标签设置指定宽度，文字溢出显示 ......
程序员阿华的博客
04-16 6155
html代码： <p class="news_info">经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审 经苏州市科学技术局组织专家评审，充分体现了其技术先进性与系统创新 ......</p> css代码: .news_info { color: #898a8b; font-size: 18px; ...
1分钟学会如何用 JS 计算文本的宽度
前端达人
10-27 8906
在项目开发中，我们有时候需要计算文本的内容宽度，你是怎么做的呢？今天看到一篇关于此内容的简短文章在此分享给大家。方法一：使用 clientHeight 和 clientWidth我们都清楚...
html——P标签 文字超出省略、 首字下沉效果 和 两端对齐
热门推荐
肖的博客
08-12 1万+
1、P标签： 块级标签 居中方式：height=line-height 文字超出省略： p{ width:100px overflow:hidden; text-overflow:ellipsis; //加省略号 white-space:nowrap; //强制不换行 } text-overflow： clip 修剪文本。 测试 elli...
设置p标签宽度和内容相同
weixin_30399821的博客
10-28 1274
p{ display:inline-block; } 转载于:https://www.cnblogs.com/qingzhengxiangmingyue/p/7746059.html
05-HTML常用标签
weixin_55101030的博客
09-19 492
html常用标签
详解CSS标签中的显示模式
11-21
特点：宽高默认都是0，不能设置宽和高，一行显示—-span b i u a 示意图 总结：对宽高不敏感，不能独占一行 3.行内的块元素 特点：只能设置宽和高，不能换行显示—img input 示意图 多学一招：从大的方面来说，其...
wangEditor 实现回车p标签默认自带行高1.6
weixin_44179923的博客
05-13 1431
需求： 想实现在富文本里面按回车 生成的p标签带行内样式 搜索源码里面: <code><br></code> 在var $selectionElem = editor.selection.getSelectionContainerElem();后面打印$selectionElem ，浏览器展开看到elems字段 继续展开找到style字段进行修改就行了。 xxxxxx.style.lineHeight='1.6' ...
HTML5自动换行的间距设置,div css p段落行高行距怎么设置篇
weixin_28752627的博客
05-31 3347
如何使用div+css样式设置p段落之间的上下间距，需要设置哪些样式来控制之间行距距离呢？css行高怎么写等问题，让大家彻底掌握div css p行距行高样式。DIVCSS5为大家介绍如何通过CSS样式设置p段落上下行距，而p是文章段落标签，控制p段落行距的css div属性有：1、css line-height2、margin3、padding因为p之间上下距离实现使用margin样式和padd...
HTML+CSS入门
beekim的博客
07-22 1116
1.HTML标签基础 html为网页标记语言 <标签名> DTD声明 新版： <!DOCTYPE html > 老版： 重邮官网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 标题标签 hn <h1></h1> <h2></h2
HTML怎么控制段落行高,div css p段落行高行距怎么设置篇
weixin_39736606的博客
07-02 1147
如何使用div+css样式设置p段落之间的上下间距，需要设置哪些样式来控制之间行距距离呢？css行高怎么写等问题，让大家彻底掌握div css p行距行高样式。DIVCSS5为大家介绍如何通过CSS样式设置p段落上下行距，而p是文章段落标签，控制p段落行距的css div属性有：1、css line-height2、margin3、padding因为p之间上下距离实现使用margin样式和padd...
line-height和height的区别
weixin_30872157的博客
06-23 738
line-height 是指每行的高度,假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时，这个p标签的高度会为20px，如果为两行，则p标签的高度为40px;line-height是20px不变, 只是height变了 但是，我们定义p的样式为height:20px,那么这个元素的高度并不会因为内容的多少而改变，如果显示为2行，文字的总高度超出了，这...
html：常见标签以及标签的默认样式
YangLu888
09-30 3752
html常见标签以及标签的默认样式和默认样式的清除、换行元素和不换行元素以及li排列在一行。
标签语法及特点
m0_74223841的博客
11-08 250
p标签：段落标签，特性：宽度默认撑满整个父元素，高度默认由内容撑开，独立成行垂直布局，自带外边距。h系列标签：h1~h6:标题标签依此减小，重要程度依此减弱，h1标签一个网页里只能有一个。特点：默认撑满整个父元素，高度由内容撑开，独占一行，垂直布局，自带外边距，自带加粗特效。div标签特性：宽度默认撑满整个父元素，2高度默认由内容撑开，3独立成行，——垂直布局。应用场景：文章内的标题，内容章节的标题，logo，产品的标题 等.特性：宽度继承父元素的宽度，高点默认为0，自带边框，自带外边距。
为什么浏览器默认p的高度是21px
dragoo1的专栏
09-24 687
<html> <head> <meta charset="utf-8"> </head> <body> <p style="background-color: #407bbd;padding: 0 0 0 0;margin: 0 0 0 0;">Apple</p> </body> </html> 无论chrome还是firefox，盒模型的高度都是21px，但字体默认是1em=16.
使用js在div中改变p标签的宽高
最新发布
05-05
可以使用JavaScript中的DOM操作来改变p标签的宽高，具体代码如下： HTML代码： ```html <div id="myDiv"> <p id="myParagraph">这是一个段落</p> </div> ``` JavaScript代码： ```javascript // 获取p标签元素 var paragraph = document.getElementById("myParagraph"); // 改变p标签的宽高 paragraph.style.width = "200px"; paragraph.style.height = "100px"; ``` 上面的代码将p标签的宽设置为200像素，高设置为100像素。你可以根据需要修改这些值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值