HTML-CSS边框未显示在<p>标记中？-堆栈溢出

顺晟科技

2022-10-19 11:59:26

140

我目前对css和HTML5非常陌生。

我不知道我在代码中做错了什么，请告诉我我的错误。

为什么p标记中不显示边框？

<html>
<head>
<title>Margin</title>
    <style>
        h1{
            border:10px solid red;
            margin:25px 50px 75px 100px;
        }
        h3{
            border:1px solid red;
            margin:auto;
        }
        div{
            margin:10px 100px 1cm 200pt;
        }
        h2.mf{
            margin-bottom:inherit;
        }
        p.mf{/*Not Working*/
            margin:inherit;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>This is head 1.</h1>
    <h3>This is head 3.</h3>
    
    <div class= "mf">
        <h2>This is again h2</h2>
        <p>This is para....</p>
    </div>
</body>
</html>

顺晟科技：

使用是因为您的div类是，然后您将在之后为标记指定。

<html>
<head>
<title>Margin</title>
    <style>
        h1{
            border:10px solid red;
            margin:25px 50px 75px 100px;
        }
        h3{
            border:1px solid red;
            margin:auto;
        }
        div{
            margin:10px 100px 1cm 200pt;
        }
        h2.mf{
            margin-bottom:inherit;
        }
        p.mf{/*Not Working*/
            margin:inherit;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>This is head 1.</h1>
    <h3>This is head 3.</h3>
    
    <div class= "mf">
        <h2>This is again h2</h2>
        <p>This is para....</p>
    </div>
</body>
</html>

选择器表示p标记具有类。

需要更改为，因为div类中的p标记

这是因为您没有在标记中初始化类：d。

如下所示:

<html>
<head>
<title>Margin</title>
    <style>
        h1{
            border:10px solid red;
            margin:25px 50px 75px 100px;
        }
        h3{
            border:1px solid red;
            margin:auto;
        }
        div{
            margin:10px 100px 1cm 200pt;
        }
        h2.mf{
            margin-bottom:inherit;
        }
        p.mf{/*Not Working*/
            margin:inherit;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>This is head 1.</h1>
    <h3>This is head 3.</h3>
    
    <div class= "mf">
        <h2>This is again h2</h2>
        <p>This is para....</p>
    </div>
</body>
</html>

或者您可以在CSS中尝试这样做

<html>
<head>
<title>Margin</title>
    <style>
        h1{
            border:10px solid red;
            margin:25px 50px 75px 100px;
        }
        h3{
            border:1px solid red;
            margin:auto;
        }
        div{
            margin:10px 100px 1cm 200pt;
        }
        h2.mf{
            margin-bottom:inherit;
        }
        p.mf{/*Not Working*/
            margin:inherit;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>This is head 1.</h1>
    <h3>This is head 3.</h3>
    
    <div class= "mf">
        <h2>This is again h2</h2>
        <p>This is para....</p>
    </div>
</body>
</html>

注意：点（.）在css中初始化类

没有具有类的HTML元素

如果我要在HTML文档中设置所有样式，我会选择此样式

<html>
<head>
<title>Margin</title>
    <style>
        h1{
            border:10px solid red;
            margin:25px 50px 75px 100px;
        }
        h3{
            border:1px solid red;
            margin:auto;
        }
        div{
            margin:10px 100px 1cm 200pt;
        }
        h2.mf{
            margin-bottom:inherit;
        }
        p.mf{/*Not Working*/
            margin:inherit;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>This is head 1.</h1>
    <h3>This is head 3.</h3>
    
    <div class= "mf">
        <h2>This is again h2</h2>
        <p>This is para....</p>
    </div>
</body>
</html>

或

如果我要为
元素的子元素的所有元素设置样式，我会选择下面的样式

<html>
<head>
<title>Margin</title>
    <style>
        h1{
            border:10px solid red;
            margin:25px 50px 75px 100px;
        }
        h3{
            border:1px solid red;
            margin:auto;
        }
        div{
            margin:10px 100px 1cm 200pt;
        }
        h2.mf{
            margin-bottom:inherit;
        }
        p.mf{/*Not Working*/
            margin:inherit;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <h1>This is head 1.</h1>
    <h3>This is head 3.</h3>
    
    <div class= "mf">
        <h2>This is again h2</h2>
        <p>This is para....</p>
    </div>
</body>
</html>

上一篇：html-如何修复CSS代码，使其在下一篇：HTML-如何优化角材料中的表-堆栈

网站建设

Html

HTML-CSS边框未显示在<p>标记中？-堆栈溢出