How to add border line using HTML/CSS [duplicate]

Question

I am trying to add a border to a widget which is working but it is not capturing the overall the wigets fields only half part is drawing a line

enter image description here

HTML:

    <p class="solid">
   <img src="log.jpg" width="20" height="20"/>

    <div class="input-group">
      <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
      </div>
    </div>

 </p>

CSS:

p.solid {border-style: solid;}

You can not nest div into p, that is invalid HTML. The error correction of the browser is fixing your mistake, by closing the p element as soon as it encounters the starting tag of the div. — 04FS
– 04FS, Commented Oct 2, 2019 at 7:05

Sarah Groß · Accepted Answer · 2019-10-02 07:09:29Z

3

A paragraph is not intended as a wrapper for other block elements. The rendering engine will automatically close the <p> tag before opening the <div> that follows, therefore rendering an empty paragraph with no height, resulting in just a border without anything else. Change the paragraph to a <div> (or any other semantically feasible element) and it will work.

.solid {
  border-style: solid;
}

<div class="solid">

  <div class="input-group">
    <input type="text" ng-model="c.data.message" class="form-control" aria-label="...">
    <div class="input-group-btn">
      <button type="submit" ng-click="c.add()" class="btn btn-primary">Search</button>
    </div>
  </div>

</div>

answered Oct 2, 2019 at 7:09

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abdul Azeez Over a year ago

Thank you Constantin. One quick question why we use .solid in css ? what . refres to ?

Sarah Groß Over a year ago

. is the class selector. When you add class="solid" you can select it in CSS via .solid, just like you can use id="something" via #something. I'd suggest you find a beginner's tutorial for CSS that explains the very basics. :-)

Sarah Groß Over a year ago

If your question refers to why it was decided to use that notation - I don't know either. Maybe there's an explanation you can find on the web, otherwise you'd have to ask the inventors of CSS why they decided to use the dot and hash. ;)

Collectives™ on Stack Overflow

How to add border line using HTML/CSS [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related