2

I have text and <hr> alternating vertically in a div and I added padding-left to the div but I don't want the horizontal rule between the words to be affected by the padding.

Is there a way exclude them?

.menuoptions {
    height:30px;
    width:225px;
    color:#666;
    line-height:30px;
    font-weight:bold;
    padding-left:10px;
}

I tried .menuoptions hr {...} and adding negative padding, but to not much surprise, it didn't work.

Example: Fiddle

SaturnsEye
  • 6,297
  • 10
  • 46
  • 62

5 Answers5

3

You can't exclude them per se, and negative padding is a no-no, but you can use negative margins on the <hr>

See updated fiddle

Benedikt D Valdez
  • 409
  • 3
  • 10
  • Ahh I was so close! why is it ok for negative margins but not padding? – SaturnsEye Oct 25 '13 at 10:33
  • 1
    Simply because of the nature of the box model; padding pushes content further inside the box, away from the inner edge (essentially a part of the box itself), while margin pushes other content around the box away from the outer edge. If you think about it like that, negative padding makes no sense at all :) For more info on the box model you can check out this article at [css-tricks.com](http://css-tricks.com/the-css-box-model/). – Benedikt D Valdez Oct 25 '13 at 10:40
  • 1
    More on [negative margins specifically](http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/), for future reference – Benedikt D Valdez Oct 25 '13 at 10:50
1

You can just use a negative margin-left 

.menuoptions hr {
    margin-left: -10px;
}

JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
1

That is because you have not made a reset of the custom attributes. Like <p>, <input>, etc. by default have some padding and margin and when you add an attribute, it populates accordingly.

In case of such inconsistencies across browsers, I suggest you to use a CSS Reset probably Eric Mayer Reset

This will normalize all your discrepancies and shall render your page with uniform consistencies across all browsers.

The Code:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Hope this helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
0
.menuoptions hr {
 margin-left:-10px
}
ColoO
  • 813
  • 5
  • 14
0

Alternatively you can use a ul, which would be the correct way to do this:

<ul>
    <li>Firewalls</li>
    <li class="sep"></li>
    <li>Security In Education</li>
    <li class="sep"></li>
    <li>SSL VPN Encryption</li>
    <li class="sep"></li>
    <li>Wireless Access Points</li>
</ul>

CSS:

ul {
    list-style:none;
    margin:0;
    padding:0;
    color:#666;
    font-weight:bold;
    width: 300px;
}
ul > li {
    padding:5px;
}
ul > li.sep {
    height:1px;
    border-bottom: 1px solid #aaa;
    padding:0;
}

The fiddle

epoch
  • 16,396
  • 4
  • 43
  • 71