CODEWITHSUNDEEP
htmlcssweb
Matt
Matt

Reputation: 11

Button will not react to padding or margin in CSS

I'm having an issue getting one of my buttons to react to either padding or margin in CSS. The button stays at the very bottom of the div and does not react to any type of padding or margin within the class I assigned to the div.

HTML

<div class="topBorder">
    <h1>Matt</h1>
    <a href="#" class="aboutButton">ABOUT</a>
</div>

CSS

.aboutButton {
      color: white;
      padding: 800px;
      font-size: 20px;
      font-family: 'Ubuntu';
}

Current Look

Upvotes: 1

Views: 3916

Answers (1)

Ashwin Gupta
Ashwin Gupta

Reputation: 2197

Try adding display:inline-block to your css button. This should allow it to be adjusted as needed. A div is by default a block level element and as such takes up the full available width. Inline elements take up only as much space as needed. Inline-block allow elements to have a specific width and height.

See http://www.w3schools.com/css/css_display_visibility.asp

Upvotes: 2

Related Questions