Internal elements overlapping the section

Question

Internal elements overlapping the section

Navigation

#1 by (2 votes)

0

The <b> tag overrides the <section> tag, see the example when I use padding :

Noticeintheimageabovethatthelightgraybarreferstosectionisshorterthanthebtag.Thatis,theinnertagoverlaps.

AlsowhenIresizethebrowserthetagboverlaysitself,withoutgivingthespacingdue.Seetheexamplebelow:

HTML

<sectionclass="compartilhar">
<span>Compartilhar:</span>
<span>Compartilhar:</span>
<span>Compartilhar:</span>
<span>Compartilhar:</span>
<span>Compartilhar:</span>
<span>Compartilhar:</span>
</section>

CSS

section.compartilhar{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ccc;
}

section.compartilhar span{
  background-color: #333;
  padding: 15px;
  box-sizing: border-box
  font-size: 18px;
}

css

asked by anonymous 20.07.2017 / 15:46

1 answer

Doubt - Query (Do not bring a certain record) Ensure random sorting of query result

score 2 · Accepted Answer

As already mentioned, the b tag is intended for text formatting and should be handled through a container, for example ...

section.compartilhar{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ccc;
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

section.compartilhar div{
  background-color: #333;
  padding: 15px;
  //box-sizing: border-box
  font-size: 18px;
}

<section class="compartilhar">
<div><b>Compartilhar:</b></div>
<div><b>Compartilhar:</b></div>
<div><b>Compartilhar:</b></div>
<div><b>Compartilhar:</b></div>
<div><b>Compartilhar:</b></div>
<div><b>Compartilhar:</b></div>
</section>