CODEWITHSUNDEEP
htmlcssimagemargin
user3483494
user3483494

Reputation:

Why is there a margin around hr and img tags?

I am trying to remove the whitespace around hr and img tags, I have not had any luck yet, Here is a JSFiddle.

Can someone show me how to do this?

Is it a good idea to use hrs instead of divs when creating a sepearation/surrounding? Should I use a div instead? Can someone tell me which one is the better option. Sorry for the short question.

SOME CODE :

<img class="banner margin_padding" src="http://goo.gl/ftvYk5">
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>

img.banner {
    height: 200px;
    width: 100%;
}
hr.line {
    background-color: red;
    color: red;
    height: 20px;
}
.margin_padding {
    margin: 0px;
    padding: 0px;
}

EDIT :

Borders have a default border size I forgot about and the image should be displayed block

Upvotes: 0

Views: 98

Answers (2)

Viscocent
Viscocent

Reputation: 2064

Add display:block to your img tag and border:0 to your hr tag.

.margin_padding {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

Upvotes: 3

kapex
kapex

Reputation: 29959

What you see is the default margin of the <body> tag. The actual value depends on the browser.

A common practice to avoid most browser's different default values is explicitly setting margin and padding to 0:

html, body {
    margin: 0;
    padding: 0;
}

Upvotes: 1

Related Questions