Put margins on a paragraph inside a button-CodePudding

There is a button with the paragraph "Restaurants" in it. When I try to create a margin for it, it doesn't do anything. How do you properly use margins for the button?

CSS

.buttonp{
    margin-right: 300px;
 }

HTML

<button  inline="true" style="margin-left: 150px;margin-right: 20px;">
                <p id="6" >
                    Restaurants
                 </p>
                
            </button>

CodePudding user response：

This isn't valid HTML, you can't have a paragraph <p> tag inside a <button>. If you wish to target text within a button you need to use <span></span> tags.

<button  inline="true" style="margin-left: 150px; margin-right: 20px;">
    <span id="6" >Restaurants</span>
</button>

I would suggest if you want to have a margin-right of 300px you're better of adding a wrapper to the button element (and probably better off using % or another relative value if it's that much of a margin, generally speaking)

<div >
    <button  inline="true" style="margin-left: 150px; margin-right: 20px;">
        <span id="6" >Restaurants</span>
    </button>
</div>

And then the CSS

.button-wrapper {
    margin-right: 300px;
}

CodePudding user response：

I cheek your code you use several time css inside style and style sheet CSS I suggested you use CSS in one side.. if you have specific class then use this class and CSS specific class... here my code

.buttonp{
    margin-right: 300px;
     display : block;
 }

Hope it will help you :)