Why CSS border is not showing in <p> tag? [duplicate]-CodePudding

I am currently very new to css and html5.

I don't know what I have done wrong in the code please tell me my mistake.

Why Border in not showing in p tag?

<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>

CodePudding user response：

The selector p.mf mean that p tag has class mf.

You need change to .mf p because your p tag inside div class mf

<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;
            color: green;
        }
        .mf p {/*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>

CodePudding user response：

There is no p HTML Element with class mf

I'd select this style if I were to style all p in HTML document

p {
  margin: inherit;
  border: 5px solid red;
}

I'd select below style if I were to style all p elements who is child of element with .mf

.mf p {
  margin: inherit;
  border: 5px solid red;
}

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 {
  border: 5px solid red;
}

<h3>This is head 3.</h3>

<div class="mf">
  <h2>This is again h2</h2>
  <p>This is para....</p>
</div>

CodePudding user response：

it's because you haven't initialized the class in your <p> tag :D .

like this :

        <p class="mf">This is para....</p>

or you can try this in your css

        p{
            margin:inherit;
            border: 5px solid red;
        }

note : dot (.) in css is to initialize class

CodePudding user response：

You use .mf because of your div class being mf and then you would put p afterwards to specify for the <p> tag.

<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;
        }
        h.mf{
            margin-bottom:inherit;
        }
        .mf p {/*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>