1

Using this HTML, I have a div with a pink border, without the border there is no whitespace at the top and bottom, with the border there is, and it doesn't look right.

    <head>
<style>
blockquote {
background-color:#AAA;
border-color:#FAA;
border-width:5px;
border-style:solid;
-webkit-border-radius:10px;
padding:0;
}

</style>
</head>
<body><blockquote> <p>Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Mauris a  magna vel ante lobortis blandit. Cras  justo nulla, commodo eu mollis eu,  ultrices sed lorem. Nullam varius,  metus eu venenatis luctus, est elit  ultrices est, ut facilisis nunc nunc  ac nunc. Morbi non neque vitae orci  eleifend volutpat sed nec justo. Morbi  a elit enim, ut tempus mi. Vestibulum  a quam et diam consequat porttitor non eget urna. Curabitur tincidunt  adipiscing ante non dignissim. Sed  laoreet ultrices massa. Aenean  hendrerit blandit sagittis.</p></blockquote></body>

If you use the TryItEditor from w3schools: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic You will see how there is a gap between the pink border and text at the top and bottom, the padding is all set to 0, so how do I get rid of this gap?

Jonathan.
  • 53,997
  • 54
  • 186
  • 290

1 Answers1

3

That's the padding or margin on the p element

blockquote p {
  margin: 0;
  padding: 0;
}
RoToRa
  • 37,635
  • 12
  • 69
  • 105