1

I'm trying to change the length of the border that I placed between the paragraphs, also I want to make the border-left at the start of each beginning paragraph fit with the text instead of being taller than it.

.header{
  text-transform:capitalize;
  color:#2c3e50;
  font-weight:700;
}
p{
  line-height:1.5;
  font-weight:600;
}
.date{
  color:#3498db;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:2px;
}
body{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
}
#container{
  border:15px solid #bdc3c7;
  margin:30px 100px;
  padding:20px;
}
#paragraph{
  border-bottom:1px solid #bdc3c7;
  border-width
  
}
#paragraph p:nth-of-type(2){
  border-left:3px solid #bdc3c7;
  margin-left:10px;
  padding:5px;
}
<!DOCTYPE html>
<html>
  <head><title>Photo Blog</title><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <div id="paragraph">
    <p class="date">March 18 2017</p>
    <h1 class="header">this is my first article</h1>
        <p>Bacon ipsum dolor amet jowl pork chop ribeye shankle landjaeger andouille kielbasa. Fatback short loin tri-tip shank strip steak ball tip pork ground round flank capicola boudin. </p><p>Venison ribeye ham, shoulder picanha alcatra short loin strip steak jowl tongue porchetta salami capicola. Bresaola pancetta leberkas swine beef ribs, pork loin bacon hamburger. Beef ribs picanha fatback landjaeger, meatball pig turkey pork belly t-bone capicola.</p>

      <p>Jerky pork loin leberkas sausage t-bone, ball tip meatball fatback drumstick kielbasa. Porchetta tail cow, turkey capicola sausage andouille spare ribs kielbasa kevin. Beef ribs fatback cupim kielbasa ball tip, pork loin spare ribs flank. Salami rump chicken, doner kevin bacon kielbasa shankle drumstick biltong spare ribs cow brisket. Bacon pork biltong cow ham hock chuck. Ribeye beef brisket fatback, short loin sausage picanha. Pig venison picanha, fatback pork loin meatball leberkas tenderloin tongue ham hock ground round frankfurter t-bone pork belly.</p>
        </div>
      <div id="paragraph">
    <p class="date">March 18 2017</p>
    <h1 class="header">this is my first article</h1>
        <p>Bacon ipsum dolor amet jowl pork chop ribeye shankle landjaeger andouille kielbasa. Fatback short loin tri-tip shank strip steak ball tip pork ground round flank capicola boudin. </p><p>Venison ribeye ham, shoulder picanha alcatra short loin strip steak jowl tongue porchetta salami capicola. Bresaola pancetta leberkas swine beef ribs, pork loin bacon hamburger. Beef ribs picanha fatback landjaeger, meatball pig turkey pork belly t-bone capicola.</p>

      <p>Jerky pork loin leberkas sausage t-bone, ball tip meatball fatback drumstick kielbasa. Porchetta tail cow, turkey capicola sausage andouille spare ribs kielbasa kevin. Beef ribs fatback cupim kielbasa ball tip, pork loin spare ribs flank. Salami rump chicken, doner kevin bacon kielbasa shankle drumstick biltong spare ribs cow brisket. Bacon pork biltong cow ham hock chuck. Ribeye beef brisket fatback, short loin sausage picanha. Pig venison picanha, fatback pork loin meatball leberkas tenderloin tongue ham hock ground round frankfurter t-bone pork belly.</p>
      </div>
      <div id="paragraph">
    <p class="date">March 18 2017</p>
    <h1 class="header">this is my first article</h1>
        <p>Bacon ipsum dolor amet jowl pork chop ribeye shankle landjaeger andouille kielbasa. Fatback short loin tri-tip shank strip steak ball tip pork ground round flank capicola boudin. </p><p>Venison ribeye ham, shoulder picanha alcatra short loin strip steak jowl tongue porchetta salami capicola. Bresaola pancetta leberkas swine beef ribs, pork loin bacon hamburger. Beef ribs picanha fatback landjaeger, meatball pig turkey pork belly t-bone capicola.</p>

      <p>Jerky pork loin leberkas sausage t-bone, ball tip meatball fatback drumstick kielbasa. Porchetta tail cow, turkey capicola sausage andouille spare ribs kielbasa kevin. Beef ribs fatback cupim kielbasa ball tip, pork loin spare ribs flank. Salami rump chicken, doner kevin bacon kielbasa shankle drumstick biltong spare ribs cow brisket. Bacon pork biltong cow ham hock chuck. Ribeye beef brisket fatback, short loin sausage picanha. Pig venison picanha, fatback pork loin meatball leberkas tenderloin tongue ham hock ground round frankfurter t-bone pork belly.</p>
      </div>
      </div>
    
  </body>
</html>
Asons
  • 84,923
  • 12
  • 110
  • 165
john doe
  • 11
  • 1
  • You would either need to applying `margin` or `padding` to the `#container`, depending on whether you want to shrink or grow the border :) – Obsidian Age May 19 '17 at 00:42
  • There are two things affecting this. `Padding` and `Lineheight`. Removing the padding and changing the line-height to 1em fixes the problem but is UGLY. Also note you have duplcate IDs which is invalid makrup and a bad idea – Jon P May 19 '17 at 00:43
  • Oh, ok can you tell me which are duplicate ID's and how they're invalid? I decided not to make the border length smaller and leave it as is. – john doe May 19 '17 at 03:48
  • The `id="paragraph"` is used repeatedly, which is invalid as there can only be one element with the same id, or else no point having an id at all. – Asons May 19 '17 at 05:27

0 Answers0