CODEWITHSUNDEEP
htmlcssandroid-webview
drWisdom
drWisdom

Reputation: 512

HTML padding-left not working for div

I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text. 

<HTML>
 <Head>....</Head>
 <Body> 
 <div id="titlebox">
 <p>First Heading</p>
 </div>
 </Body>

Here is a the CSS style for the div:

div#titlebox {background-color:#f2f2f2; 
              padding-top:2px;
              padding-bottom:2px;
              padding-left:2px;  }

Snippet: 

div#titlebox {
  background-color: #f2f2f2;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}
<HTML>

<Head>....</Head>

<Body>
  <div id="titlebox">
    <p>First Heading</p>
  </div>
</Body>

</HTML>

The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.

Upvotes: 1

Views: 11741

Answers (3)

Dulangi_Kanchana
Dulangi_Kanchana

Reputation: 1233

Here's a solution you can try without using css

<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
 <p>First Heading</p>
</div>
</body>

Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later

follow this url:

Is it bad to use uppercase letters for html tags?

Upvotes: 3

user5680788
user5680788

Reputation:

Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.

Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.

--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding

Upvotes: 0

Acrux
Acrux

Reputation: 406

Your code works fine :)) I simply made padding bigger to make it more obvious

div#titlebox {
  background-color: #f2f2f2;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 100px; 
}
<HTML>


<Head>....</Head>

<Body>
  <div id="titlebox">
    <p>First Heading</p>
  </div>
</Body>

</HTML>

Upvotes: 0

Related Questions